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

Question

我正在使用 DirectSmile 为 EFI 数字店面构建印刷产品，这是一种插入 InDesign 和数字店面的可变数据程序。可以使用 JavaScript 在 DirectSmile 中完成可变数据字段的复杂格式设置。

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

javascript > 可变数据字段 > Directsmile 文档 > 压缩产品 > 数字店面

现在我正在制作名片。它显示它的电话号码是这样的：

办公室 123.456.7890
手机 123.456.7890
传真 123.456.7890

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

这是我过去用来格式化电话号码的 javascript，因此前面的标签（“Office”“Cell”“Fax”）仅在客户使用关联的电话号码时才会出现，并格式化电话号码本身：

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;
}

我可以添加/更改什么以使前面的标签（“办公室”“单元”“传真”）显示为 8pt Archer 粗体，电话号码显示为 8pt Graphik Light？

非常感谢所有帮助。谢谢

Answer 1

注意：此响应仅适用于标准 HTML

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

在 javascript 中设置项目的 style 属性：

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

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

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

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';
  }
}