当font-family回退时，CSS字体大小发生变化 [英] CSS font-size changes when font-family falls back

问题描述

我想使用一个字体（gill sans），由于短x高等渲染非常小等等。如果我设置在一个合理的大小，然后一个浏览器回到一个更典型的字体我'

I want to use a font (gill sans) which renders very small due to a short x-height etc. etc. If I set this at a reasonable size, and then a browser falls back to a more typical font I've specified in the font-family, the fall-back font renders very large - can I set the font-size according to the font the browser is using?

推荐答案

我有同样的问题使用Calibri（与大多数sans字体相比略小）。我最终做了以下（假设你有jquery）：

I had the same issue using Calibri (slightly smaller compared to most sans fonts). I ended up doing the following (assumes you have jquery):

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

在 $（document）.ready（）函数中添加以下内容：

Add the following to the $(document).ready() function:

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

现在如果用户没有Calibri，我们看到Arial在87.5％。这只适用于没有定义/继承font-size的元素。在显式定义字体大小的地方也必须进行调整（也许添加一个类到这些元素，并改变jquery选择器到 $（'。adjustClass'））。

So now if the user doesn't have Calibri we see Arial at 87.5%. This only applied to elements where font-size was not defined/inherited. Wherever font-size is explicitly defined will have to be adjusted as well (maybe add a class to those elements and change the jquery selector to $('.adjustClass')).

如果你可以这样做会很好：
font：11px Calibri，10px Arial; 但没有这样的运气：）

Would be nice if you could just do: font:11px Calibri, 10px Arial; - but no such luck :)

这篇关于当font-family回退时，CSS字体大小发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！