字体无法与 Chrome 一起使用

Question

我正在做一些前端项目，但我遇到了字体问题。该字体在 Firefox 上还可以，但在 Chrome 上看起来很丑，就像 Time News Roman 一样。

这是用于将字体导入我的 Sass 项目的代码：

@font-face {
  font-family: 'aHeadline';
  src: local(' Headline'),
  url('../fonts/headline.woff') format('woff'),
  url('../fonts/headline.ttf') format('truetype'),
  url('../fonts/headline.svg') format('svg');
  src: url('../fonts/headline.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

这是一个现场演示http://185.13.36.42/T/foo.html

注意：字体来自Font Squirrel webfont generator

Answer 1

只是一点语法变化。这对你有用：

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