Google 替代字体 font-family 不工作

Question

这是我的问题，我需要这样设置字体：

font-family: 'Century Gothic', Helvetica, Dosis;

Dosis 是来自 Google 字体库的字体。我需要它，Century Gothic 是 MS 字体，与 Office（直到 2010 年）一起安装，Helvetiva - 你们都知道。所以我需要第三个选择。

当我将 Dosis 放在第一位时，它当然有效。第二或第三位给我 Arial。

我尝试在 CSS 和 header 中通过@import 加载此字体。两者都不行。

如您所见，一切看起来都很好，但渲染的字体是 Arial（为什么？！）。我在想：根本没有加载 Dosis。但为什么不是呢？

PS。 @import 当然在 css 行之前 font-family.

有人吗？

// 我试过了：

font-family: Helvetica, Dosis;

给我 Arial。

font-family: 'Century Gothic', Dosis;

成功了！我有 Dosis。

现在我真的不明白它是如何工作的。

Answer 1

请将其包含在您的 css 文件中

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: local('Dosis Regular'), local('Dosis-Regular'), url(http://fonts.gstatic.com/s/dosis/v4/xIAtSaglM8LZOYdGmG1JqQ.woff) format('woff');
}
body{
    font-family: 'Dosis', sans-serif;
}

Answer 2

您可以在 font-family 中输入多个字体名称属性以确保其中一种会显示在屏幕上。但是，如果浏览器找到第一个字体（在您的情况下 'Century Gothic'），它将错过其余的（Helvetica 和 Dosis）。

所以，如果您更喜欢Dosis字体，请更改

font-family: 'Century Gothic', Helvetica, Dosis;

给这个：

font-family: Dosis, Helvetica, 'Century Gothic';

Answer 3

如您所述，Century gothic 字体是一种 MS 字体， Gfonts 上不可用。最近的 Gfont 是 Google font Muli
第二点是您必须导入该字体。第三，这就是它的工作原理字体系列：'Century Gothic'、Dosis；首先浏览器尝试加载 Century Gothic，如果失败则加载 Dorsis。那你为什么要Arial？这是浏览器的默认字体 Web browsers default fonts

Answer 4

Dosis 与此无关（只是为了澄清事情），它是 Helvetica。在 Google Chrome Helvetica 中使用 Arial 呈现，仅供参考是 Windows Google Chrome 中无衬线字体的默认字体].
来源：http://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults/
但这也没什么关系。

所有无法识别的字体都将使用默认的标准字体呈现，大多数时候是 Times New Roman。（当然Helvetica除外）
由于 Helvetica 在韵律上与 Arial 相同，这意味着 Helvetica 和 Arial 中每个字符的宽度完全相同，因此呈现为 Arial 这有助于显示和正确打印文本。
所有其他字体均呈现为标准字体 Times New Roman。

Google 替代字体 font-family 不工作

Google Font as substitute font-family not working

html

css

fonts

font-face