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;

但我已经被警告过这不是最好的方法，因为它不同于“Bulletproof syntax”，由于IE＆lt; 9中的错误并且updated three years ago by 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＆lt; 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');
}

注意事项：

始终使用相对（相同域名）字体网址
首先包括src: url('WebFont.eot');，即使它存在于第二个src
第二个src中的第一个定义应该是EOT定义，使用iefix hashtag fix
在CSS定义中包括.eot，.woff，.ttf和.svg 。
总是希望它不适用于＆lt; = iPhone 4s，＆lt; = Galaxy S III和其他老年人。

你总是可以参考http://www.fontsquirrel.com/，并在那里下载任何字体的webfont工具包（尊重他们的许可证），看看CSS是如何包含在内的。

这里有一个强化教程：INSTALLING WEB FONTS, START TO FINISH!

Answer 2

这是我在https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/上阅读的评论：

仅供参考：问题：@ font-face未在Windows Vista的IE7中呈现，但在Windows XP和Windows 7的IE7中很好。解决方案：使用双引号而不是单身。

谁还在使用Windows Vista和IE7？天哪

因此，使用双引号会更好。

另外添加更多字体会使效果更好，这是我在一个项目中使用的示例，即使在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;
}

最好的@ font-face语法方法

2 个答案: