html - 为同一元素定义不同的字体大小

Question

我想使用 Arial 旁边的嵌入式字体作为替代。嵌入字体需要更大的字体大小。

对于同一元素，我如何确保 Arial 以 15pt 显示，而 Bebas 以 20pt 显示。 (针对同一段文字)

谢谢!

*让我进一步解释:

我有一串文字。我希望它显示为 Bebas 或 Arial。当加载 Arial 作为替代字体时，它需要具有不同的字体大小和粗细，因为共享字体大小对这些字体效果不佳(Bebas 很小)。

Answer 1

您可以使用类似 FontChecker 的脚本检查字体是否可用。它依赖于 MooTools并被这样调用:

window.addEvent('domready',function() {
  var fc = new FontChecker();
  if (!fc.check('Bebas')) {
    $$('.someclass').setStyles({'font-size': '15pt'});
  }
});

如果 Bebas 不可用，它将所有 someclass 类元素的字体大小设置为 15pt。

你的 CSS 文件:

.someclass {
  font-family:Bebas,Arial,sans-serif;
  font-size:20pt;
}

如果你不使用 MooTools，也许有一个类似的脚本用于其他库或 vanilla JS(= 没有库的纯 JS)。或者只是重写它，it's quite short .

编辑:

其他一些脚本(我不知道，我只用FontChecker):

• jQuery: http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/
• Vanilla :http://www.samclarke.com/2013/06/javascript-is-font-available/
• 另一个 Vanilla :http://www.lalit.org/lab/javascript-css-font-detect/