如何防止 Google 字体请求本地字体？

Question

我一直在尝试使用 Google Fonts API 为我的网站使用 Ubuntu 字体，但由于 Google 拥有的 Ubuntu 字体与我机器上安装的本地 Ubuntu 字体之间存在冲突，我遇到了问题。最终结果是我无法使用字体粗细为 400 的 Ubuntu 字体；我仅限于 font-weight 300 和 500。无论如何，主站点的 font-weight 300，但我希望使用 font-weight 400 来强调我的标题。

我想通过编辑 Google 字体用来删除对本地字体的所有引用的 CSS 来规避这个问题。我已经手动尝试过了，它可以工作。问题是 Google 提供的 CSS 是针对浏览器定制的，因此编辑 我 看到的 CSS 并将其存储在本地将导致字体仅适用于与我使用相同浏览器的人。

那么，是否可以动态编辑 CSS 以删除对本地字体的引用？

.

我有一个粗略的解决方案的想法，但没有得到足够的教育来知道它是否可以真正实施。基本上，可以有一个最终用户通过<link rel="css.php"> 请求的PHP 脚本。此 PHP 文件读取用户的 HTTP 请求，包括有关浏览器的信息，然后向 Google Fonts API 发出请求与完全相同的 HTTP 信息。 Google Fonts 提供了我们用户需要的 CSS。剩下的就是字符串操作。这行得通吗？

Answer 1

然后您必须手动发出字体请求。因此，您可能会请求http://fonts.googleapis.com/css?family=Ubuntu。去那里（在不同的浏览器中 - 它为每个浏览器提供请求）并复制代码。我现在只使用它在 Chrome 中提供的内容，但您需要包含不同的字体格式。它说：

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}

将其复制到您的本地 CSS，删除源参数中的 local。然后，只需将 font-family 名称更改为类似的名称。

@font-face {
  font-family: 'Webuntu';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}

最后，更新您的字体引用以使用新名称：

p { font-family:'Webuntu', sans-serif; }

无需 PHP :)