最好的@ 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

AFAIK,全部阅读,并且知道,您需要考虑以下事项:

例:

@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定义,用iefix hashtag修复
4. 在CSS定义中分别包括.eot,.woff,.ttf和.svg .
5. 总是希望它不适用于<= iPhone 4s,<= Galaxy S III和其他老年人.

你总是可以参考http://www.fontsquirrel.com/,下载任何字体的webfont工具包(尊重他们的许可证),看看CSS是如何包含在内的.

一个密集的教程将在这里:安装Web FONTS,开始完成!