@font-face 样式不起作用

Question

我已经将我的@font-face 样式放入我的 css 中，其中包含我下载的字体，但它似乎不起作用。

这是我的 CSS:

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

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

有什么我遗漏的吗？

Answer 1

使用google字体，只需在head标签中添加以下内容即可：

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

Answer 2

这是目前获得最深入支持的方法。 @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/

@font-face 样式不起作用

@font-face styling not working

html

css

font-face