css - 如何正确声明带有字体粗细和字体样式的 CSS 字体？

Question

我正在尝试使用 @font-face CSS 属性在本地定义我的 ttf 字体，如下所示:

open-sans.css

      @font-face {
        font-family: 'Open Sans';
        src: url('OpenSans-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
      }
      @font-face {
        font-family: 'Open Sans';
        src: url('OpenSans-Bold.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
      }
      @font-face {
        font-family: 'Open Sans';
        src: url('OpenSans-BoldItalic.ttf') format('truetype');
        font-weight: bold;
        font-style: italic;
      }
      @font-face {
        font-family: 'Open Sans';
        src: url('OpenSans-Light.ttf') format('truetype');
        font-weight: lighter;
        font-style: normal;
      }
      @font-face {
        font-family: 'Open Sans';
        src: url('OpenSans-Italic.ttf') format('truetype');
        font-weight: normal;
        font-style: italic;
      }
      @font-face {
        font-family: 'Open Sans';
        src: url('OpenSans-ExtraBold.ttf') format('truetype');
        font-weight: bolder;
        font-style: normal;
      }

但是，不幸的是，它不起作用，浏览器 (Iceweasel 38.6.1) 总是显示最后一个(特别粗体)。我也关注了this answer ，这似乎是迄今为止最好的一个。

我做错了什么？

附言

我需要在本地使用 Open Sans 字体，没有任何互联网连接，因此 Google Fonts API 不适合我的场景。

编辑

1. ttf文件与CSS在同一目录下；
2. open-sans.css作为第一个CSS文件导入；

3. 页面中文本的字体属性是:

   font-family: "Open Sans",sans-serif;
   font-size: 14px;
   

但它总是加载在 CSS 上声明的最后一个。

Answer 1

它不起作用的原因有很多:

1. 您的字体文件路径不正确(确保 .css 文件与 .ttf 文件位于同一文件夹中。如果它们如果不是，请确保 CSS 中的路径指向正确的位置。

2. 您的浏览器可能无法呈现 .ttf 文件。请检查并在必要时提供其他文件格式(.eot、.woff、.svg)以实现跨浏览器兼容性。您可能想为此使用网络字体生成器。我个人最喜欢的是 fontsquirrel ，但我不推荐或认可它。我只是用它。 :)

3. 也许您没有在 CSS 中正确引用 @font-face？正确的形式是:

your-element.your-class {
  font-family: 'Open Sans', sans-serif;
  font-weight: normal|bold|{exact-weight};
  font-style: normal|italic;
}

另外，请注意 @font-face 必须在使用之前声明。 CSS 读取一次，只向前移动，并且在读取时必须能够解释代码。

注意:bolder 和 lighter 不是 @font-face 中 font-weight 属性的有效 CSS 值> 描述符(正如 BoltClock 在评论中指出的那样)。建议使用精确的字体粗细 (100 - 900) 以确保您的字体呈现相同的跨浏览器。 (即:将 font-weight: bolder; 替换为 font-weight: 900; 并将 font-weight: lighter; 替换为 font -权重:200；)。 (当然，或者使用您的首选值)。