css - 为什么 Linux 上的 Chrome 显示错误的字体粗细？

Question

我的网站有以下基本字体:

body {
  font:300 16px/1.5 Ubuntu,sans-serif;
  ...
}

字体通过 Google Fonts 加载:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,700,700i&amp;subset=greek,greek-ext">

在大多数浏览器中，All 是字体方面的。但是，在 Linux 上的 Chrome 上，我看到显示的基本字体的字体粗细似乎是 500 而不是 300。屏幕截图显示了我在说什么。普通文本太重了。斜体文本以正确的粗细显示(并使用无样式的 <em> 标签创建)。它还表明 Chrome 知道它应该使用 300 权重。

此问题不会出现在 Windows 或 MacOS 上的 Chrome 中——仅 Linux。此外，我在旧版本的 Chrome (48.0.2564.116) 和当前的 Chromium (70.0.3538.67) 中都看到过它。在我测试过的任何操作系统上，Firefox、Edge 或 Opera 都没有问题。我的 Linux 机器运行的是 Ubuntu 16.04。此外，Chrome 在 fonts.google.com 上以所有字重正确呈现 Ubuntu 字体。

任何想法可能会发生什么？

Answer 1

这是由于 Linux(可能只是 Ubuntu)中的一个错误。

我是如何解决它的:Googlefonts url 获取 css 字体规则的纯文本(如果你只是从浏览器调用它，你可以看到)。它们包含按优先顺序查找字体的 src。 Googlefonts 首先查找本地字体，如果不存在则从远程位置获取它们:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(https://fonts.gstatic.com/s/ubuntu/v13/4iCv6KVjbNBYlgoC1CzjsGyN.woff2) format('woff2');
  unicode-range: U+0000-00FF, ...
}

这通常是个好主意，因为获取系统上已安装的字体是不必要的，并且会减慢页面加载速度。但是，Ubuntu 中有一个已知错误会导致加载错误的已安装字体:https://bugs.launchpad.net/ubuntu/+source/fonts-ubuntu/+bug/1512111 Googlefonts 上的字体名称实际上是正确的，但由于某种原因，操作系统无法正确处理它们。因此，Google 无法从他们这边解决这个问题。

我的解决方案是只删除本地 src，以便立即从远程获取字体。 (我真的想知道为什么谷歌默认不提供“跳过本地字体”选项，也许他们不想浪费他们的资源。)在那种情况下，它可能甚至不影响性能，因为除了 Ubuntu 之外的所有其他系统无论如何不要将其作为本地字体。

以下是我如何使用 Javascript 跳过本地字体:

fetch('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700')
  // get browser/OS specific googlefont font-face file and convert to string to make adjustments
  .then(res => res.text())
  .then(googleFonts => {
    // remove "local" src locations to force using remote (or browser-cached) fonts (no locally installed system fonts)
    googleFonts = googleFonts.replace(/local(.*),\s/g, '')

注意:当您在浏览器中查看它时，不要只是复制 css，因为它因浏览器/操作系统而异 - 这就是 Googlefonts 的全部意义。

注意:我不确定如何在 HTML 中使用它，但考虑到 JS 生成纯文本，使用 css 的 @import from file 应该很容易弄明白。