将 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）。但是，将字体设置为“我想要的字体”没有任何效果。
3. 有趣的是，如果我尝试使用此方法将其设置为拼写错误的字体，它会恢复为系统字体，但是当我将其设置为“我想要的字体”时not - 表明浏览器识别字体但拒绝出于某种原因设置它。

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

什么会导致 JS 无法将元素的

style.fontFamily

设置为动态加载的字体？我如何在不使用 CSS 的情况下解决这个问题（因为字体名称是从服务器动态加载的）？

Answer 1

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

使用 WebFontLoader 的 active 回调 在加载后设置字体： 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）并且字体已实际下载。