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

Question

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

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

Answer 1

大多数@font-face at-rules 以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;
  }