无法理解防弹@ font-face CSS规则

Question

在将此标记为重复之前,请仔细阅读我的疑问.我在网上彻底搜索(特别是stackoverflow)并且无法清除疑虑.这个问题看起来似乎很长,但它包含了其他人也想知道的关键问题.

我试图在防弹@font-face规则方面获得一点点知识,那里的人们让我感到困惑.请建议我这个家伙.所以,这是Font-Spring(http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/)建议的最新防弹代码以及解决的IE9兼容模式问题:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

没有IE9兼容模式修复的那个,也是Font-Spring(http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/),看起来像这样:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

目前,我正在阅读彼得·加斯顿的一本书"The Book Of CSS3".它遵循由Font-Spring所述的IE9兼容模式修复的防弹规则.他说?第二个src属性中带有查询字符串的规则负责IE9 Compat.模式修复.但是,font-spring拥有src负责IE9 Compat 的第一个属性.模式修复.如果不完全理解它,我就无法学习这种语法.

我的严重问题相当小.首先,我想知道是否只能?#iefix防止解析错误,或者它可能是?iefix(没有#)或者它可能是?xyz或?#abc.是否有必要写完全?#iefix？

其次,

• 我无法理解如何@font-face解析此规则,IE8如何决定将哪个src 属性用于eot字体.如果IE9即使在兼容模式下也没有解析问题,它将如何决定使用哪种字体格式？兼容模式下的IE9会破坏查询字符串字体网址吗？如果没有,那么为什么不呢？
• 有人可以告诉我,如果我看看上面说明的整个防弹规则,IE8,IE9在兼容模式下,IE9在普通模式和其他浏览器中将如何解析它？如果浏览器支持大多数字体,浏览器将如何决定使用哪种字体？浏览器查看url值和src属性的顺序是什么？
• IE8是否会接受src没有任何local()和 format()值以及eot格式正确的单独属性,它将不再进一步src定义其他格式的下一个属性？或者它仍会转到下一个src 属性并从那里下载字体？
• 如果?在下一个src属性中有一个查询字符串(),IE8(兼容模式下的IE9也会考虑)下载eot字体两次吗？如果将没有查询字符串,然后将它接受eot来自第一属性字体并不会断裂或将其拆分和不从第一连敷任何自定义的字体src属性？

此外,IE9在正常模式下是否支持eot格式？如果我只删除整个查询字符串声明,那么防弹语法是否仍然有效:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE6-IE8 as well as IE9 Compat. Mode */
src: url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

以上情况不会在所有可能的情况下都有效吗？IE6-8将src在兼容模式下与IE9一起使用,所有其他浏览器将遵循其余规则.

我建议的上述规则是否与以下local()值相同:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE6-IE8 & IE9 Compat. Mode */
src: local('MyWebFont'), /* To fix IE6-IE8 and IE9 Compat. Mode */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

无论是在IE8还是在IE9兼容模式下,local()值都会让它们消失.. IE9在正常模式下会使用eot还是woff从上面的规则？如果它确实使用eot,我们可以对第一个src属性进行轻微更改,如下所示:

src: url('webfont.eot?#iefix') format('eot');

IE9将忽略此属性,因为它包含eot并继续使用woff,我是对的吗？另外,如果我再次对此规则进行更改,请执行以下操作:

src: url('webfont.eot?#iefix') format('embedded-opentype');

IE9现在会使用eot格式还是继续使用woff？

这就是我想知道的,是的,我认为这些问题肯定需要答案.

Answer 1

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

这只是解决各种 IE* 不一致问题的一个技巧，第一个 src 满足 IE9，所以如果您的浏览器有这个浏览器，他得到这种字体，第二个 src 不会覆盖第一个，因为 IE9 不能解析'webfont.eot?#iefix'字符串

关于规则的第二个 src：这是“旧”的防弹语法，您已经熟悉了。请注意，正如 Fontspring 关于强化规则的博客文章所述，微软在使用 IE7 和 IE8 渲染模式时修复了 IE9 中的错误，但他们实际上并没有修复 IE7 和 IE8，因此您仍然需要这些浏览器的这个技巧。

澄清一下local()：这会告诉浏览器使用特定的本地（即在页面查看器的 PC 上）可用字体，如果您的查看器没有安装它，那么他将无法看到正确的字体，有关这方面的更多信息，您可以查看：http : //www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley