html - @font-face 在某些计算机上不起作用

Question

我在我的元素中使用@font-face 来加载特定的网络字体(“Amsi Pro”)。主要问题是它适用于我测试过的大多数计算机，但并非适用于所有计算机(在它不起作用的其他网站上，@font-face 仍然有效)。

是否有任何我遗漏的内容，或需要设置的任何服务器设置可以为我提供全面支持？

@font-face 不工作的PC 的一些信息: whatsmybrowser.org/b/Q2TJ80F

实时预览: christlicher-gesundheitskongress.de

CSS:

@font-face {
  font-family: 'AmsiPro';
  font-weight: 400;
  src: url('../webfonts/2E508B_0_0.eot');
  src: url('../webfonts/2E508B_0_0.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/2E508B_0_0.woff2') format('woff2'),
       url('../webfonts/2E508B_0_0.woff') format('woff'),
       url('../webfonts/2E508B_0_0.ttf') format('truetype');
}

@font-face {
  font-family: 'AmsiPro';
  font-weight: 600;
  src: url('../webfonts/2E508B_1_0.eot');
  src: url('../webfonts/2E508B_1_0.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/2E508B_1_0.woff2') format('woff2'),
       url('../webfonts/2E508B_1_0.woff') format('woff'),
       url('../webfonts/2E508B_1_0.ttf') format('truetype');
}

html,body {
    font-family: 'AmsiPro', Helvetica, sans-serif;
}

Answer 1

尽管看起来 Firefox 38 should support @font-face ，可能存在部分使用问题。尝试使用类似 Font-Squirrel 的应用程序开发你的字体的 SVG，然后像这样重新排序你的@font-face:

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

根据 this source , 它应该最大限度地支持您的字体。

希望这对您有所帮助!