Question

我在我的项目中使用@ font-face来加载特定的webfont（＆＃34; Amsi Pro＆＃34;）。主要的问题是它适用于我测试过的大多数计算机，但并不适用于所有计算机（在那些没有使用@ 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，它应该最大化您的字体支持的数量。

希望这有帮助！

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

1 个答案: