css - Font-Face 不适用于 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;
}