@ font-face样式无效

Question

我已经用下载的字体将@ font-face样式放置在CSS中，但似乎无法正常工作。

这是我的CSS：

@font-face {
font-family: "Quicksand";
src: url("fonts/Quicksand/Quicksand-Light.otf") format("opentype");
}

该字体称为“流沙”，它在我的目录（位于index.html和main.css文件所在的文件夹中）的“字体”文件夹下，并且在该文件夹中有一个名为“流沙”的文件夹，并且我要用于该页面的字体在此文件夹的内部，其名称为“ Quicksand-Light.otf”。

有什么我想念的吗？

Answer 1

这是目前可能获得最深层支持的方法。 @ font-face规则应在任何样式之前添加到样式表中。

理想的CSS应该是这样的

CSS

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

然后使用它来设置元素样式，如下所示：

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

结帐浏览器支持和详细信息，请使用https://css-tricks.com/snippets/css/using-font-face/

Answer 2

使用Google字体，只需将以下内容添加到head标签：

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