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

Question

我想使用一种字体(gill sans),它由于x高度等而呈现非常小的等等.如果我将它设置为合理的大小,然后浏览器回退到我已指定的更典型的字体font-family,后备字体渲染非常大 - 我可以根据浏览器使用的字体设置字体大小吗？

Answer 1

我使用Calibri时遇到了同样的问题(与大多数sans字体相比略小).我最终做了以下(假设你有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%.这仅适用于未定义/继承font-size的元素.无论何处显式定义font-size都必须进行调整(可能会为这些元素添加一个类并将jquery选择器更改为$('.adjustClass')).

如果你能这样做会很好: font:11px Calibri, 10px Arial;- 但没有这样的运气:)

Answer 2

我建议您尝试指定级联字体，当字体不可用时，这些字体可以优雅地降级，例如

Arial, FontThatsLikeArial, FontThatsALittleLikeArial, FontThatsALittleLessLikeArial, Sans-serif;

或者，如果您想严格控制字体，请查看 cufon，它不需要您的用户安装任何插件，并且适用于大多数现代浏览器。https://github.com/sorccu/cufon/wiki/about