css - 即使不使用，浏览器也会加载@font-face 字体吗？

Question

所以我有这个堆栈:

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

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

MyCustomFont.tff 是否被浏览器加载，即使机器中存在 Helvetica(即:Mac 用户)？

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