css - 本地安装的 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;
}

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

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

Answer 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')，如果可能，它要求加载本地文件。最简单的解决方案是复制所有 Google 的 CSS，将其粘贴到您自己的 CSS 中，并将此 local 名称修改为，例如 local('Ubuntu Bold NonExisting Name or Something Else' )。这种字体不存在，不会替代CSS加载的字体。

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