本地安装的 TTF 会覆盖 Google 字体

Posted 2023-03-15

【中文标题】本地安装的 TTF 会覆盖 Google 字体

【英文标题】：locally installed TTF overrides Google fonts

【发布时间】：2012-03-14 06:39:58

【问题描述】：

我正在使用来自 Google Fonts 的 Ubuntu 字体：

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css' />

我的样式表：

body 
    font-family: 'ubuntu',arial;

它可以工作，但如果安装同名字体 (Ubuntu)，它会覆盖来自 Google Fonts 的字体。

是否可以强制浏览器使用谷歌字体？

【参考方案1】：

答案不在于您的代码，而在于 Google 的代码。

这是您请求的 CSS 的一部分：

@font-face 
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: bold;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');

这里的关键行是local('Ubuntu Bold')，它要求尽可能加载本地文件。 最简单的解决办法就是复制所有谷歌的CSS，粘贴到自己的CSS中，修改这个local的名字，比如local('Ubuntu Bold NonExisting Name or Something Else')。此类字体不存在，不会替换 CSS 加载的字体。

附：我自己没有测试过这个。如果0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff URL 即将过期，那么您将处于困境中。如果优先考虑防止本地覆盖，请尝试查看字体的许可证并考虑自己托管字体。

【讨论】：

为什么要改成local('Something Nonexistant')？为什么不直接删除本地人，所以只有url('whatever')？

这种技术（指定不存在的字体名称）是“笑脸”方法的基础。后来，UTF-8 字符的使用导致了 android 的一些 bug，所以不再推荐这种方法。但我认为，这次黑客攻击是有原因的。可能，某些浏览器试图检测并加载本地字体。但是，最好尝试不使用 local() 并查看它是否适用于所有浏览器。可能。

抱歉，我认为这不是一个好的解决方案。 Fonts API 为不同的客户端返回不同的字体——请参阅What is the Google Fonts API serving?。如果您只是从浏览器复制请求生成的代码，则结果会针对您的浏览器进行“优化”，但仅限于您的浏览器。

对于某些字体，尤其是 Oswald，将本地字体优先于 Web 字体会带来烦人的问题。我希望 Google Fonts 有一个 URL 变量，可以让我们完全禁用本地字体，但由于这还不可能，所以复制他们的 CSS 并删除本地规则是唯一的解决方案。但是，需要注意的是，Google 会为特定浏览器提供自定义 CSS，因此如果复制他们的 CSS，您需要确保在每个浏览器的不同版本中点击他们的 CSS url，然后合并结果！

！警告！ 将 Google 的样式表复制到您自己的代码库中可能会造成更多破坏，但效果会更好。 Google 会针对特定浏览器更改样式表，当 Firefox 浏览器请求 CSS 时，Google 会呈现一个完全不同的样式表，其中包含不同的字体文件。