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

Question

所以我有这个堆栈:

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

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

是MyCustomFont.tff通过浏览器加载即使黑体是存在于机器中(即: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