Question

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

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

我的问题是，是否可以指定如果特定字体权重不能使用下一个字体 - 在这种情况下为Arial。

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

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

<span class="need-bold">Hello World</span>

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

1 个答案: