css - 如何防止@font-face使用本地文件而不是服务器文件？

Question

访问一个网站时，我发现菜单链接比在同事计算机上使用相同浏览器观看同一页面时异常大胆。 从我的 Windows 字体文件夹中删除相应的字体可以纠正差异。

我的问题是在网站上设计 css 字体时如何防止这种可能性

Answer 1

大多数 @font-face at 规则以 local(name-of-local-file) 开头，然后引用您的远程 url(/on/server/teh-webfont.woff)。

在这种典型情况下，浏览器将尝试使用本地文件，如果找不到任何内容，则会继续从您的服务器下载远程资源。如果他们找到本地匹配字体，那么他们将立即使用它并停止搜索字体，因此他们不会下载和使用您的远程资源。

结论:不要使用local()，只保留那些url()。这是contrary of this SO answer

没有 local() 和许多对应多种格式的 url() 的示例。浏览器将下载第一个令他们满意的浏览器，而不是 2 个以上:

@font-face {
    font-family: 'Gudea';
    src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
    src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
         url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
         url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
         url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
    font-weight: normal;
    font-style: normal;
}