如何仅使用 javascript 设置字体系列 - 无法访问 jquery、html 或 css，仅 js

Question

我正在使用 DirectSmile 为 EFI 数字店面制作印刷产品，DirectSmile 是一种插入 InDesign 和数字店面的可变数据程序。可变数据字段的复杂格式可以在 DirectSmile 中使用 javascript.

完成

我可以添加 javascript 进行格式化，但是没有 css 或 html 我可以与 js 结合使用。我只是将 js 片段添加到可变数据字段，保存并导出文件，然后上传到 Digital Storefront。

javascript > 可变数据字段 > Directsmile 文档 > 压缩产品 > Digital Storefront

现在我正在制作名片。它显示其 phone 数字，如下所示：

办公室 123.456.7890
单元格 123.456.7890
传真 123.456.7890

Office、Cell 和 Fax 一词应该使用一种字体（8pt Archer 粗体），而数字应该使用另一种字体（8pt Graphik Light）。这需要在 javascript 中定义，但我不知道如何定义。我对此很陌生，研究还没有成功——我发现的每一种方法似乎都需要访问 html/css，而我没有。

这是我过去用来格式化 phone 数字的 javascript，因此前面的标签 ("Office" "Cell" "Fax") 仅如果关联的 phone 号码被客户使用，则会出现，并格式化 phone 号码本身：

function numbers(){
    out = ""
    num = VAR.GetS("Office_Phone", "")       if(num.length>0) out += "OFFICE" + phone(num) + "\n";  else out = "" + out;
    num = VAR.GetS("Cell_Phone", "")         if(num.length>0) out += "CELL" + phone(num) + "\n";  else out = "" + out;
    num = VAR.GetS("Fax", "")                if(num.length>0) out += "FAX" + phone(num) + "\n";  else out = "" + out;
    return out;
}

function phone(number){
    tmp = ""; div = ".";
    if( number.length>0 ){
        tmp = number.replace(/\D/g, "");
        var len = tmp.length;
        tmp = tmp.split("");
        tmp.splice(len-7,0, div);
        tmp.splice(len-3,0, div);
        tmp = tmp.join("");
    }
    return tmp;
}

我怎样才能 add/change 使前面的标签 ("Office" "Cell" "Fax") 显示为 8pt Archer bold 而 phone 数字显示为 8pt图形灯？

非常感谢所有帮助。谢谢

Answer 1

注意：此回复仅适用于标准 HTML

它似乎与问题中最初要求的 DirectSmile 无关。对于希望通过 vanilla Javascript 在普通 HTML 元素上设置 fontFamily 的人来说，响应可能会有用。否则请忽略。

为 javascript 中的项目设置样式属性：

var el = document.getElementById('theelementid');
el.style.fontFamily = 'Graphik Light';

为此，您需要确定特定的 DOM 元素 ID，以将您的 javascript 定位到。

如果您只有块的 ID，则可能需要扩展概念以通过块内的标签名称识别项目。例如，以下内容会将字体系列样式应用于具有 id="blockid" 的外部块中的每个 span 元素：

var block = document.getElementById('blockid');
var els = block.getElementsByTagName('span');
for(var i in els){
  if(els.hasOwnProperty(i)){
    var el = els[i];
    el.style.fontFamily = 'Graphik Light';
  }
}

如何仅使用 javascript 设置字体系列 - 无法访问 jquery、html 或 css，仅 js

How to set font family with javascript ONLY- no access to jquery, html, or css, only js

javascript

fonts

font-face

adobe-indesign