将fontFamily设置为Google字体没有任何效果

Question

我正在使用WebFontLoader加载字体，然后我通过document.getElementById("my-button").style.fontFamily = "Font I Want"设置元素的字体。这是不工作(字体保持默认)，但它很奇怪，因为:

1. 我可以设置字体为"字体我想要"通过在开发工具中进入样式规则，并将font-family CSS规则直接应用于元素。
2. 我可以通过直接在开发工具的控制台中输入document.getElementById("my-button").style.fontFamily = "Arial"来设置任何正常字体(例如Arial)。但是，将字体设置为"我想要的字体"没有任何效果。
有趣的是，如果我尝试使用此方法将其设置为拼写错误的字体，它会恢复到系统字体，但不是当我将它设置为"字体我想要"-表示浏览器识别字体，但由于某种原因拒绝设置。

但是，当我直接用CSS设置它时，它可以工作，所以我知道字体是正确加载的。

什么可能导致JS不能设置一个元素的style.fontFamily的字体是动态加载的?我怎么能不使用CSS解决这个问题(因为字体名称是从服务器动态加载的)?

Answer 1

没有看到正在发生的网络流量，我只能为您的问题提出一些可能的解决方案:

使用WebFontLoader的活动回调来设置加载后的字体:WebFontLoader有一个活动回调，当所有字体都被加载时调用。您可以使用这个回调来设置元素的字体。下面是一个例子:

WebFont.load({
google: {
families: ['Font I Want']
},
active: function() {
document.getElementById("my-button").style.fontFamily = "Font I Want";
}
});

将字体名称用引号括起来，并使用备用字体:字体名称可能包含在设置样式时导致问题的字符。要确保字体名称被视为字符串，请将其用引号括起来。此外，在所需字体不可用的情况下，提供备用字体总是一个好主意。看到:

document.getElementById("my-button").style.fontFamily = "'Font I Want', sans-serif";

如果这也不起作用，确保你已经成功地加载了字体与WebFontLoader。您可以通过打开开发人员工具并切换到网络选项卡来检查这一点。在这里，您应该能够看到对字体的网络请求。请确保此请求的状态为200 (OK)，并且字体实际上已经下载。