本地安装的TTF字体优先于Google字体

Question

我正在使用来自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;
}

虽然它能正常工作，但如果安装一个与 Google 字体同名的字体（Ubuntu），就会覆盖来自 Google Fonts 的字体。

是否有可能强制浏览器使用来自 Google Fonts 的字体？

- Martin

Answer 1

答案不在你的代码中，而在于谷歌。

这是你要请求的 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')，它要求在可能的情况下加载本地文件。

最简单的解决方案是复制Google的全部CSS代码，将其粘贴到你自己的CSS文件中，然后将此local名称修改为例如local('Ubuntu Bold NonExisting Name or Something Else')。这种字体不存在，也不会替换CSS加载的字体。

P.S. 我个人没有测试过这个解决方案。如果0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff链接已失效，则会比较棘手。尝试查看字体的许可证，并考虑自己托管该字体，如果防止本地覆盖是一个优先考虑的问题。

- Jonas Lekevicius

---

为什么将其修改为local('Something Nonexistant')？为什么不只是删除本地内容，使其只剩下url('whatever')？ - Matt Grande

这种技术（指定不存在的字体名称）是“Smiley方法”的基础。后来，UTF-8字符的使用在Android上引起了一些错误，因此不再推荐该方法。但我认为，这个技巧有其用意。可能是因为某些浏览器仍试图检测并加载本地字体。然而，尝试在没有使用local()的情况下看看是否在所有浏览器中都能正常工作是一个好主意。这有可能成立。 - Jonas Lekevicius

抱歉，我认为这不是一个好的解决方案。字体API对于不同的客户端返回不同的字体 - 参见[Google Fonts API提供了什么？]（https://developers.google.com/fonts/docs/technical_considerations#Serving）。如果您只是复制浏览器生成的代码请求，则结果将针对您的浏览器进行“优化”，但只适用于您的浏览器。 - Kariem

有些字体，特别是 Oswald 字体，将本地字体优先于网页字体显得非常棘手。我希望 Google Fonts 能够提供一个 URL 变量，让我们完全禁用本地字体，但由于这还不可能，所以复制他们的 CSS 并删除本地规则是唯一的解决方案。然而，需要注意的是 Google 为特定浏览器提供定制的 CSS，因此如果复制他们的 CSS，您需要确保在每个浏览器版本中都使用他们的 CSS URL，并合并结果！ - purefusion

警告！将Google的样式表复制到您自己的代码库中可能会带来更多问题而不是好处。当Firefox浏览器请求CSS时，Google会为特定浏览器修改样式表，因此会呈现完全不同的样式表，其中包含不同的字体文件。 - Ambidex