如果指定的字体粗细不可用，则使用下一个字体答案

【问题标题】：Use next font if specified font-weight not available如果指定的字体粗细不可用，则使用下一个字体
【发布时间】：2016-03-30 05:51:39
【问题描述】：

我正在尝试解决字体问题。我们已经购买了 Helvetica Light 字体，并通过字体链接了它。在 CSS 中，我们有 font-family: 'Helvetica', 'Arial', sans-serif;。

现在，当有人没有在计算机中安装 Helvetica 字体（大多数是 Windows 用户）时，他们可以正确看到 Light 版本，但他们看不到 Bold Helvetica，因为它使用最接近该字体的字体粗细。

我的问题是是否可以指定特定字体粗细是否无法使用下一个字体 - 在这种情况下为 Arial。

感谢所有愿意帮助我的人。

【问题讨论】：

标签： html css fonts

【解决方案1】：

一种方法是使用一个小脚本，它查找一个类.need-bold，找到后迭代其字体并测试是否存在粗体，如果存在，则在该类中添加新样式以覆盖初始样式.

function getWidthNum(elem) {
  return parseFloat(window.getComputedStyle(elem,null).getPropertyValue('width'));
}
(function(elem) {
  var tst = document.createElement('span');
  tst.textContent = 'abcdefghijklmnopqrstuvwxyz0123456789';
  tst.style = 'position:absolute;left:-9999px;display:inline-block;font-size:20px;';
  document.body.appendChild(tst);
  var fonts = window.getComputedStyle(elem,null).getPropertyValue('font-family').split(',');
  for (var i = 0; i < fonts.length; i++) {
    tst.style.fontFamily = fonts[i];
    tst.style.fontWeight = 'bold';
    var w = getWidthNum(tst);
    tst.style.fontWeight = 'normal';
    if (w > getWidthNum(tst)) {
      var sheet = document.createElement('style')
      sheet.innerHTML = ".need-bold {font-family: '" + fonts[i] + "';}";
      document.body.appendChild(sheet);
      break;
    }
  }
  document.body.removeChild(tst);
})(document.querySelector('.need-bold'));

.need-bold {
  font-family: 'Helvetica', 'Times New Roman', Georgia;
}

&lt;span class="need-bold"&gt;Hello World&lt;/span&gt;

【讨论】：