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

我正在使用谷歌字体的Ubuntu字体：

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

它可以工作，但是如果安装一个同名字体（Ubuntu），它会覆盖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粗体不存在的名称或其他名称”）

。这种字体不存在，也不会取代CSS加载的字体

---

另外，我自己还没有测试过。如果

0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff

URL即将过期，那么您将处于困境。尝试看到字体的许可证，并考虑自己托管字体，如果防止本地重写是一个优先事项。

为什么要更改为<代码>本地（“不存在的东西”）< /代码>？为什么不删除局部变量，使其仅为

url（'whatever'）

？这种技术（指定不存在的字体名称）是“Smiley”方法的基础。后来，UTF-8字符的使用导致Android出现了一些错误，因此不再推荐使用这种方法。但我想，这是有原因的。可能，某些浏览器试图检测并加载本地字体。不过，最好不要使用

local（）

，试试看它是否在每个浏览器中都能正常工作。可能吧。对不起，但我认为这不是一个好的解决办法。字体API为不同的客户端返回不同的字体-请参阅。如果您只是复制从浏览器生成的请求的代码，结果将针对您的浏览器进行“优化”，但仅针对您的浏览器。对于某些字体，尤其是Oswald，将本地字体优先于web字体是一个令人烦恼的问题。我希望GoogleFonts有一个URL变量，允许我们完全禁用本地字体，但由于这还不可能，复制他们的CSS并删除本地规则是唯一的解决方案。但是，需要注意的是，Google为特定浏览器提供定制CSS，因此如果复制他们的CSS，你需要确保在每个浏览器的不同版本中点击他们的CSS url，并合并结果！！警告将Google的样式表复制到您自己的代码库中，可能会带来更多的破坏，而不是好处。谷歌改变了特定浏览器的样式表，当Firefox浏览器请求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');
}