Question

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

打开-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，这似乎是迄今为止最好的一个。

我做错了什么？

P.S。

我需要在本地使用 Open Sans font-face，而不需要任何互联网连接，因此 Google Fonts API在我的方案中没有优势。

修改

ttf个文件位于CSS的同一目录中;
open-sans.css 作为第一个CSS文件导入;

页面中文字的字体属性为：

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

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

Answer 1

为什么它不起作用可能有很多原因：

您的字体文件路径不正确（请确保.css文件与.ttf文件位于同一文件夹中。如果不是，请确保路径在你的CSS指向正确的位置。
您的浏览器可能无法呈现.ttf个文件。如有必要，请检查并提供其他文件格式（.eot，.woff，.svg），以实现跨浏览器兼容性。您可能希望使用Web字体生成器。我个人最喜欢的是fontsquirrel，但我不建议或认可它。我只是用它。：）
也许您没有在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-weight描述符中@font-face属性的有效CSS值（正如BoltClock指出的那样），评论）。建议使用精确的字体粗细（100 - 900）以确保您的字体呈现相同的跨浏览器。（即：用font-weight: bolder;替换font-weight: 900;，用font-weight: lighter;替换font-weight: 200;。（当然，或者使用您的首选值。）

如何正确地使用font-weight和font-style声明CSS font-face？

1 个答案: