Question

所以我有这个堆栈：

 @font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont.ttf') format('truetype');
 }

 body { font-family: Helvetica, MyCustomFont, Arial, sans-serif; }

即使机器中存在Helvetica（即：Mac用户），浏览器是否加载了MyCustomFont.tff？

Answer 1

您需要使用local指令来测试本地安装的字体版本。如果未找到，则将测试列表中的下一个字体，并在可用时加载。例如：

@font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
    local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
    font-weight: bold;
}

上面的例子来自这里：
https://developer.mozilla.org/en/css/@font-face

这里有更多信息：
http://www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/

下载完字体后，浏览器会缓存该字体。一旦进入缓存，浏览器就不需要再次下载字体，从而加快了速度。有关更多信息，请参见此处：
http://code.google.com/apis/webfonts/faq.html#Performance

Answer 2

Jake Archibald在2011年的Dibi中对此进行了很好的讨论。

你可以在这里看到：http://vimeo.com/27771157分钟。 11:59

在这里：http://speakerdeck.com/u/jaffathecake/p/in-your-font-face?slide=39

即使没有使用浏览器也加载@ font-face字体？

2 个答案: