Question

我在我的网站上使用Amatic Bold，幸运的是它恰好是Google字体的一部分（https://www.google.com/fonts#UsePlace:use/Collection:Amatic+SC）。

据我了解，我应该把它放在每个html页面的头部：

<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>

，例如index.html，downloads.html等。

然后我也应该将@font-face放在我的四个.css文件中？例如，我有一个主要的.css，然后有一个用于nivo-slider等。那么我会将@font-face放在每个.css中吗？我也不确定我需要输入的确切代码。我用Google字体搜索@font-face但是每个人似乎都输入的代码与另一个不同，无论是格式化还是内容。我只是希望每个人在访问我的网站时能够看到Amatic Bold，尽管他们没有在他们的机器上安装它。

不确定投票如何在这里工作，但如果这是一个愚蠢的问题，那么对不起？我刚刚在这篇文章前一天开始进行网页设计，每个webfonts教程似乎都有所不同。我想删除这个问题，但将来有人可能会发现这个问题，并希望它能为他们澄清。

Answer 1

使用Google字体时无需使用@font-face。他们为你做了，只包括CSS文件：

<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>

并在CSS中使用font-family：

h1 {
    font-family: 'Amatic SC';
}

JSFiddle Demo

如果您打开CSS文件，您会看到：

/* latin */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5BJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

有人可以解释我应该如何在我的网站上使用@ font-face吗？

1 个答案: