@font-face 不适用于 OS X Yosemite Chrome 26 - 版本

Question

我的字体在 OS X Yosemite Chrome 26 - 版本上不工作。它在字体位置显示空白 space。在最新的浏览器版本中字体工作正常。

CSS

@font-face {
  font-family: 'DIN-Regular';
  src: url('fonts/DIN-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/DIN-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/DIN-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/DIN-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/DIN-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/DIN-Regular.svg#svgDIN-Regular') format('svg'); /* Legacy iOS */
  font-weight: normal;
}

编辑：

body {
  font-family: 'DIN-Regular', Arial, sans-serif;
}

逗号后的字体也不行

有人能帮忙吗？

Answer 1

您是在 CSS 中调用字体吗？

body {
font-family: 'DIN-Regular', Fallback, sans-serif;
}

Answer 2

你的问题是这样的：

Resource interpreted as Font but transferred with MIME type application/octet-stream

要解决此问题，请在此处查看我的回答：Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream

您需要将 mime 类型添加到 htaccess/IIS:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/font-woff .woff

Answer 3

事实证明，问题出在字体生成器生成的字体文件中。

生成的字体：

https://www.web-font-generator.com/,

http://www.fontsquirrel.com/tools/webfont-generator ,....

在 Chrome 旧版本中无法正常工作。

最后，我找到了另一个：https://fontie.flowyapps.com/home，通过它生成的字体类型在所有浏览器版本中都能正常工作。

感谢大家的回答。

@font-face 不适用于 OS X Yosemite Chrome 26 - 版本

@font-face is not working on OS X Yosemite Chrome 26 - versions

css

font-face

osx-yosemite