最好的@font-face语法方法

Question

我一直在使用这个模型

@font-face {
font-weight: WEIGHT;
font-style: STYLE;
font-family: 'NAME';
src: url('font.eot');
src: url('https://dl.dropboxusercontent.com/s/dey3lzjdpgszxzt/myriad-webfont.eot?#iefix') format('eot'), 
 url('font.woff') format('woff'), 
 url('font.ttf') format('truetype'), 
 url('font') format('svg'); }

和

font: SIZE "NAME", FALLBACK, GENERIC FAMILY;

但我被警告过，这不是最好的方法，因为它不同于"防弹语法"，后者最终因IE <9中的错误而过时，并在三年前由Fontspring更新。

后一个仍然是完美的还是现在也过时了?

CSS-Tricks最近声明使用

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

就足够了，但没有提到IE <9兼容性。

最佳实践是什么?是否有防弹实践?

Answer 1

哎呀，通读一遍，知道了，你需要考虑以下几点:

的例子:

@font-face{ 
    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?iefix') format('eot'),
         url('WebFont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('WebFont.svg#webfont') format('svg');
}

注意事项:

1. 总是使用相对(相同域)字体url
2. 首先包含src: url('WebFont.eot');，即使它存在于第二个src
3. 第二个src中的第一个定义应该是EOT定义，并使用ifix标签fix
4. 在你的CSS定义中分别包含。eot，。woff，。ttf和。svg 。
5. 总是期望它不能在<=iPhone 4s， <=Galaxy S III和其他旧的手机上工作。

您可以随时参考http://www.fontsquirrel.com/，并在那里下载任何字体的webfont工具包(尊重他们的许可证)，看看CSS是如何包含在其中的。

一个密集的教程将在这里:安装WEB字体，从开始到结束!

Answer 2

这是我在https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/:上看到的一条评论

仅供参考:问题:@font-face不能在windows vista的IE7中渲染在IE7、windows xp和windows 7中运行良好。解决方案:使用双引号而不是single.

谁还在使用windows vista和IE7?OMG

所以使用双引号会更好。

我在一个项目中使用了一个例子，它甚至可以在IE 5、IE 7-11(旧版本的IE已经在IE 11模拟器中进行了测试)、Chrome、Firefox和Opera以及其他一些旧的和现代的桌面和移动浏览器中工作:

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