最佳@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;

但我被警告说这不是最好的方法，因为它与“Bulletproof syntax”不同，后者最终由于 IE 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

最佳做法是什么？是否有一个防弹？

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标签修复
4. 在您的 CSS 定义中分别包含 .eot、.woff、.ttf 和 .svg。
5. 始终认为它不适用于

您可以随时参考 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;
}