Question

我的网站具有以下基本字体：

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

通过Google字体加载字体：

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

在大多数浏览器中，所有字体均应按字体显示。但是，在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网址获取css字体规则的纯文本（如果只是从浏览器中调用它，则可以看到它）。它们包含srcs，它们在哪里可以按优先顺序查找字体。 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，以便立即从远程获取字体。（我实际上想知道为什么Google默认不提供“跳过本地字体”选项，也许他们不想浪费他们的资源。）在那种情况下，它甚至与性能无关紧要，因为除了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，因为css随浏览器/操作系统的不同而不同-这是Googlefonts的全部内容。

注意：我不确定如何在HTML中使用它，但是考虑到JS会生成纯文本，因此应该很容易通过css的@import from file来弄清楚。

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

1 个答案: