当 font-family 回退时，CSS 字体大小会发生变化

Question

我想使用一种字体 (gill sans)，由于 x 高度较短等原因，它呈现得非常小。如果我将其设置为合理的大小，然后浏览器会回退到更典型的字体，我在 font-family 中指定后，后备字体呈现得非常大 - 我可以根据浏览器使用的字体设置 font-size 吗？

Answer 1

我在使用 Calibri 时遇到了同样的问题(与大多数无字体相比略小)。我最终做了以下事情(假设你有 jquery):

1. 获取Remy Sharp 的字体检测脚本http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

2. 将以下内容添加到 $(document).ready() 函数中:

   $(document).ready(function() {
       font.setup();
       if(!font.isInstalled('Calibri'))
           $('body').css('font-size','87.5%');
   });
   

所以现在如果用户没有 Calibri，我们会看到 Arial 为 87.5%。这仅适用于未定义/继承字体大小的元素。显式定义字体大小的地方也必须进行调整(可能向这些元素添加一个类并将 jquery 选择器更改为 $('.adjustClass'))。

如果你能做到这一点就好了: font:11px Calibri, 10px Arial; - 但没有这样的运气:)