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

Posted 2023-03-06

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

【英文标题】：how to prevent @font-face to use local files instead of server files?

【发布时间】：2016-07-02 04:28:38

【问题描述】：

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

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

【参考方案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;

【讨论】：

如果不使用local()但不添加所有格式怎么办？

有些浏览器不会下载任何东西，因为没有一种格式是兼容的，并且不会使用这种字体。下一个字体将在您的声明font-family: your-font,something-else,a-websafe-one,sans-serif; 中使用，仅此而已（如果您不编写无衬线字体，则最终的默认字体是衬线字体，即大多数...次的时间）。 Descriptions of formats on SO 。使用 Icomoon 或 Fontsquirrel 服务可以节省时间。

【参考方案2】：

下载字体

.ttf

将字体保存在您网站的文件夹中

对于调用字体，在 css 中使用此代码：

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


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

【讨论】：

这不是和 OP 的要求完全相反吗？