如何正确声明CSS font-face与font-weight和font-style？ [英] How to declare CSS font-face with font-weight and font-style properly?

问题描述

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

I'm trying to use the @font-face CSS property to define my ttf fonts locally as follows:

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 ）总是显示最后一个（加粗的一个）。我也跟着这个答案，这似乎是迄今为止最好的。

But, unfortunately, it's not working, and the browser (Iceweasel 38.6.1) always show me the last one (extra bold one). I followed also this answer, which seems to be the best one until now.

我做错了什么？

PS

我需要在本地使用打开字体字体，而无需任何互联网连接，因此 Google Fonts API不在我的方案。

I need to use the Open Sans font-face locally, without any internet connection, so Google Fonts API does not feet in my scenario.

EDIT

1. ttf 文件位于CSS的同一目录中;


2. open-sans.css 被导入为第一个CSS文件;



3. 页面中文本的字体属性为：

1. ttf files are in the same directory of the CSS;
2. open-sans.css is imported as the first CSS file;

3. font properties for text in the page is:

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

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

But it always loads the last one declared on the CSS.

推荐答案

可能有几个原因导致它无效：

There could be a number of reasons why it doesn't work:

1. 您的字体文件路径不正确（确保 .css 文件在同一个

您的浏览器可能无法呈现 .ttf 档案，请检查并在必要时提供其他档案格式（ .eot ， .woff ， .svg 想要使用网络字体生成器，我的个人最喜欢的是 fontsquirrel ，但我

Your browser might not be able to render .ttf files. Please check and, if necessary, provide additional file formats (.eot,.woff, .svg) for cross-browser compatibility. You might want to use a web-font generator for this. My personal favorite is fontsquirrel, but I don't recommend or endorse it. I just use it. :)

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

Perhaps you're not referencing the @font-face correctly in your CSS? Correct form is:

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

此外，请注意 @ font-face 必须在 之前声明 。 CSS读取一次，只有前进，必须能够解释代码，当它读取它。

Also, please note that the @font-face must be declared before you use it. CSS reads once, only goes forward and must be able to interpret the code when it reads it.

注意： bolder 不是有效的CSS值 font-weight 描述符（由 BoltClock 在评论中很好地指出）。建议使用精确的字体权重（100 - 900），以确保您的字体呈现在同一个跨浏览器。 （即：用 font-weight：900; 和替换 font-weight：bolder; font-weight：lighter; with font-weight：200; ）。 （或者使用您的首选值，当然）。

Note: bolder and lighter are not valid CSS values for font-weight property inside @font-face descriptor (as very well pointed out by BoltClock, in the comments). It is recommended to use exact font weights (100 - 900) to make sure your font is rendered the same cross-browser. (i.e.: replace font-weight: bolder; with font-weight: 900; and font-weight: lighter; with font-weight: 200;). (Or use your preferred values, of course).

这篇关于如何正确声明CSS font-face与font-weight和font-style？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！