Google字体作为替代字体系列无效

Question

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

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

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

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

我尝试在CSS和标题中通过@import加载此字体。两者都不起作用。

正如你所看到的，它看起来都很好，但渲染字体是Arial（为什么？！）。我在考虑这个问题：Dosis根本没有加载。但为什么不是？

PS。 @import当然是在使用font-family的css行之前。

任何人

// 我试过了：

font-family: Helvetica, Dosis;

给我Arial。

font-family: 'Century Gothic', Dosis;

工作！我有Dosis。

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

Answer 1

Dosis与此无关（只是为了清除问题），它是Helvetica。在Google Chrome中Helvetica使用Arial呈现，其中FYI是Windows中谷歌浏览器的sans-serif的默认字体。
Src：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。

Answer 2

正如您所提到的，Century Gothic字体是MS字体，Gfonts上提供 NOT 。 最近的Gfont是Google font Muli
第二点是你必须导入该字体。 第三，这就是它的工作原理 font-family：'Century Gothic'，Dosis; 首先浏览器尝试加载Century Gothic，如果失败则加载Dorsis。 那你为什么要得到Arial？它是浏览器的默认字体Web browsers default fonts

Answer 3

请在您的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 4

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

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

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

到这一个：

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