JS设置WebFontLoader动态加载字体无效的问题及解决

问题现象 #

使用WebFontLoader加载字体后，通过document.getElementById("my-button").style.fontFamily = "Font I Want"设置元素字体无效，但存在以下特殊表现：

• 在开发者工具的样式面板中直接为元素添加font-family: "Font I Want"规则可正常生效
• 控制台中设置Arial等系统预装字体时生效，但设置"Font I Want"无效
• 设置拼写错误的字体名称时，元素会回退到系统字体；但设置"Font I Want"时无回退，说明浏览器识别该字体却拒绝应用
• 直接通过CSS规则设置该字体可正常生效，证明字体已成功加载

原因分析 #

1. 字体名称标识不匹配：WebFontLoader加载的字体，其浏览器内部识别的PostScript名称可能和你使用的显示名称（如"Font I Want"）不一致。CSS规则对字体名称的兼容性更强，可识别显示名称，但JS设置inline style时可能要求使用更精确的PostScript名称。
2. inline style的解析规则差异：带空格的字体名称在CSS中可直接使用，但部分浏览器在处理JS动态设置的inline style时，要求必须为带空格的名称添加引号，否则无法正确解析。
3. 加载时机问题：即使字体已加载完成，若设置样式的代码执行时机早于WebFontLoader确认字体加载完成的时机，也可能导致设置无效。

解决方法（无需CSS，支持动态获取字体名称） #

1. 获取浏览器认可的准确字体名称 #

通过document.fontsAPI遍历已加载字体，获取目标字体的真实标识：

document.fonts.forEach(font => {
  console.log('字体名称:', font.family);
});

将控制台输出的名称替换掉代码中的"Font I Want"即可。

2. 为带空格的字体名称添加引号 #

当字体名称包含空格时，给名称包裹单引号或双引号后再赋值：

// 假设从服务器获取的字体名称为fontName
const fontName = "Font I Want";
document.getElementById("my-button").style.fontFamily = `'${fontName}'`;

3. 确保在字体加载完成后执行设置 #

利用WebFontLoader的active回调，在字体完全加载完成后再设置样式：

// 假设从服务器动态获取字体名称
const dynamicFontName = "Font I Want";

WebFont.load({
  custom: {
    families: [dynamicFontName]
  },
  active: function() {
    document.getElementById("my-button").style.fontFamily = `'${dynamicFontName}'`;
  }
});

内容的提问来源于stack exchange，提问作者wwohlers