css - 在 Cambria 的字体中使用本地 src

Question

如您所知，Mac 系统在不到 33% 的情况下支持 Cambria 字体。所以我必须为它使用字体。我需要一个代码来帮助用户的浏览器(取决于他们的系统)如果他们没有字体然后下载它。所以我写了这段纯CSS代码:

@font-face {
    font-family:Cambria;
    src:
    local('Cambria'), 
    url('../fonts/Cambria/Cambria.ttf');
}

body{
    font-family:Cambria, Georgia, serif;
}

看起来不错。但是当我使用这个站点 ( https://tools.pingdom.com ) 检查问题时，对于 chrome 或 firefox 或其他浏览器，这个站点监视我下载了 ttf 文件。我想因为我已经有了字体，所以不应该下载它并且必须将它作为本地字体来阅读。问题是什么。非常感谢您的回答。

Answer 1

该字体可能已下载，因为该字体在系统 (OS) 上不可用。根据操作系统的不同，字体在系统上的位置可能会有所不同。您可以轻松检查特定字体在底层系统上是否可用。请参阅以下链接以检查已安装的字体:

http://www.howtogeek.com/howto/22277/how-to-install-manage-and-delete-fonts-on-your-pc/

我测试了一个使用“Cambria”字体的示例页面，并验证浏览器没有发出下载字体的请求(因为我的系统已经安装了 Cambria 字体)。

可以在下面的笔上找到示例代码:

http://codepen.io/kaashan/pen/ygjjmb

@font-face {
    font-family:Cambria;
    src: local('Cambria'), url('../fonts/Cambria/Cambria.ttf');
}

您可以打开浏览器开发工具并监控触发了哪些请求(只需更改 HTML 部分中的一些文本)。如果您看到对“Cambria.ttf”的请求，则仅表示该特定字体不适用于浏览器。

由于我的系统有“Cambria”字体，我必须将本地 url 修改为“Cambria A”才能看到被触发的请求。