如何防止@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;
}

Answer 2

下载字体 .ttf
将字体保存在您网站的文件夹中

要调用字体，请在 css:

中使用此代码

@font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}

.example{
font-family: YourFont, sans-serif;
}

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

how to prevent @font-face to use local files instead of server files?

css

fonts

webfonts

font-face