css - 斜体覆盖标准？

我正在尝试在我的项目中声明相同字体的各种形式。我想在相同的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;
}

为什么会这样，有什么办法可以解决此问题？

最佳答案

您用斜体覆盖了普通的@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;
}

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