@font-face 真的可以强制自定义字体显示并覆盖用户的选择吗？

Posted 2023-03-15

【中文标题】@font-face 真的可以强制自定义字体显示并覆盖用户的选择吗？

【英文标题】：Can @font-face really force custom font display and override user's choice?

【发布时间】：2016-04-28 13:25:06

【问题描述】：

嗨，

我最近遇到了@font-face，当我读到我们的网络开发人员终于有办法在任何浏览器/计算机上为所有用户显示自己的字体时，我真的很兴奋，无论他们的浏览器设置如何，他们拥有或不是安装的字体。但是，我还没有找到一个可行的例子。我试图自己实现它，但它也不起作用，所以有什么问题？这是我的代码：

@font-face 
    font-family: DeliciousRoman;
    src: local('DeliciousRoman'), url('font.ttf') format('truetype');


span 
    font-family: 'DeliciousRoman', sans-serif;


<span>example</span>

显示的字体是普通的浏览器字体。这是@font-face 的限制还是只是我的代码？

谢谢。

【问题讨论】：

“终于”是什么意思？这是我们多年来一直能够做到的事情，也是任何主要网站都已经做到的事情。 “通用” WOFF 格式已经存在了三年，在此之前我们已经能够使用 webfonts 作为捆绑格式 @font-face 规则。

似乎它毕竟不是“最终”，因为仍然不可能覆盖每个用户的偏好。至少使用@face-font，所以唯一可靠的方法是使用javascript。

是的，它应该是正确的：它是他们的计算机，如果他们有明确的、ban-hammer 风格的覆盖，那些应该启动。是他们的电脑。但是，对于正常的、非用户覆盖、用户样式覆盖、可访问性覆盖会话，您的 @font-face 规则将完全按照它们应该执行的操作。如果您的语法和 CSS 规则优先级正确。即使使用 JavaScript，我的浏览器偏好 也会获胜，因为它是我的电脑。

但是大多数页面都必须使用 javascript。如果您禁用它，您将无法浏览 90% 的互联网，因此用户不太可能禁用它，这与“允许页面选择自己的字体”不同。所以我想我会坚持使用 cufon 字体，因为它会覆盖该选项。

然而，JS 也与自定义字体无关，因为它是由 CSS 控制的。你说这是必须的，我反对这种说法，如果没有指标，我们也不会更聪明。但是，如果您的内容在没有 JS 的情况下无法呈现，那么您的 Web 开发就错了。了解自己的渐进增强。

【参考方案1】：

这里有两个问题，所以我会尽量回答：

首先，@font-face 不强制用户使用字体。根据Mozilla Developer页面：

@font-face CSS 规则允许作者指定在线字体以在其网页上显示文本。通过允许作者提供他们自己的字体，@font-face 消除了依赖用户在其计算机上安装的有限数量的字体的需要。 @font-face at-rule 不仅可以在 CSS 的顶层使用，还可以在任何 CSS 条件组 at-rule 中使用。

所以@font-face 只提供了一个新的字体定义。如果浏览器设置了样式来覆盖您的字体，那么它仍然会被覆盖。

其次，就您的实施而言，一切似乎都很好。也许您应该检查您是否正确引用了您正在加载的字体文件。 “font.tff”是正确的名称吗？它与此代码所在的文件位于同一目录中吗？您的浏览器是否覆盖了字体？你使用的浏览器是否支持@font-face？

【讨论】：

是的，我使用的是 firefox，但现在我意识到“允许网页使用它们的字体”选项没有被选中。但我猜它默认没有选中，对吧？如果是这样，那么 `face-font 几乎没用。但是检查选项后我的代码仍然无法工作。