CSS Font Face，仅在字体不存在时下载

Posted 2023-03-06

【中文标题】CSS Font Face，仅在字体不存在时下载

【英文标题】：CSS Font Face, only download when font is non existent

【发布时间】：2013-01-05 13:36:16

【问题描述】：

我在我的网站 (Segoe UI) 上包含了一个自定义字体，但是字体文件大约为 1mb，第一次加载需要几秒钟。

我使用的是 Mac，OSX 未附带该字体。但是，据我所知，它包含在 Windows 中。

如果客户端上尚不存在该字体，如何让 CSS 仅加载字体？

【问题讨论】：

您接受 javascript 解决方案吗？

如果我可以将它保留在 CSS 中，我会更愿意。但是，如果这是不可能的，JS 将不得不这样做。头版加载这么慢很痛苦

看看这是否可能重复：@font-face src: local - How to use the local font if the user already have it? 可以帮助你。

Segoe UI 不是免费字体，您需要获得 Microsoft 的许可才能将其用作网络字体。

【参考方案1】：

使用local('Segoe UI') 解决了。似乎它从头到尾优先考虑来源。

这是工作代码

@font-face 
    font-family: Segoe;
    src: local('Segoe UI'), url('fonts/segoeui.ttf') format('truetype'), url('fonts/segoeui.woff') format('woff');

【讨论】：

请注意，您需要获得 Microsoft 的许可才能在您的网站上使用此字体。

您确认您实际上不需要代码中的第一行“src”吗？