Question

我正在尝试在我的项目中声明各种形式的相同字体。我希望在相同的 BrandonText 名称下使用每种字体类型的normal和italic版本。只要我添加italic版本，就会完全忽略normal版本。

@font-face {
    font-family: 'BrandonText';
    src:  url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
          url('/fonts/BrandonText-Thin.otf')  format('opentype'),
          url('/fonts/BrandonText-Thin.woff') format('woff'),
          url('/fonts/BrandonText-Thin.ttf')  format('truetype'),
          url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'BrandonText';
    src:  url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
          url('/fonts/BrandonText-Thin.otf')  format('opentype'),
          url('/fonts/BrandonText-Thin.woff') format('woff'),
          url('/fonts/BrandonText-Thin.ttf')  format('truetype'),
          url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
    font-weight: 100;
    font-style: italic;
}

为什么会这样，有什么方法可以解决这个问题吗？

Answer 1

您已为两种字体指定了相同的名称。换到这个。

localStorage

Answer 2

你用斜体覆盖了你的正常@font-face。相反，只需声明一次：

@font-face {
    font-family: 'BrandonText';
    src:  url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
          url('/fonts/BrandonText-Thin.otf')  format('opentype'),
          url('/fonts/BrandonText-Thin.woff') format('woff'),
          url('/fonts/BrandonText-Thin.ttf')  format('truetype'),
          url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
    font-weight: 100;
}

然后你可以对两种情况使用相同的声明。如果您想要斜体，只需将font-style: italic添加到元素的css。

Answer 3

两者都以相同名称声明

更改你的第二个font-family：'BrandonText'; to font-family：'BrandonTextItalic';

斜体覆盖标准？

3 个答案: