Can'；我不理解防弹@font-face CSS规则

在将此标记为副本之前，请仔细阅读我的疑问。我在网上彻底搜索（尤其是stackoverflow）&无法澄清疑问。这个问题乍一看似乎很长，但它包含了其他人也想知道的关键问题

我试图对防弹

@font-face

规则有一点深入的了解，外面的人把我弄糊涂了。请给我推荐这个家伙。 下面是Font-Spring（）建议的最新防弹代码，以及解决的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（）修复的，看起来如下所示：

@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');
}

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

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

目前，我正在读彼得·加斯顿的《CSS3之书》。 它遵循防弹规则，具有IE9兼容模式Font-Spring所述的修复。他说，第二个

src

属性中带有查询字符串

？

的规则负责IE9 Compat。模式修正。但是，font spring拥有负责IE9 Compat的第一个

src

属性。模式修正。如果不完全理解它，我就无法学习这个语法

我的严肃问题比较小。首先，我想知道是否只有

？#iefix

可以防止解析错误，或者它可能类似于

？iefix

（没有

#

），或者它可能是

？xyz

或

？#abc

。是否需要准确地编写

？#iefix

第二,

• 我感觉不到这个

  @font-face

  规则是如何被解析的，又是如何被解析的 IE8决定哪个

  src

  属性将用于

  eot

  font。如果IE9在解析方面没有问题，即使在 兼容模式，它将如何决定使用哪种字体格式？意志 处于兼容模式的IE9在查询字符串字体url上中断&如果不是 那为什么不呢
• 有人能告诉我，如果我看了整个防弹规则吗 上面介绍了IE8、IE9在兼容模式、IE9在正常模式和其他模式下的工作方式 浏览器会解析它吗？如果浏览器支持大多数字体，它将如何从几种字体中决定使用哪种字体。浏览器查看

  url

  值和

  src

  属性的顺序是什么
• 是不是像一个单独的

  src

  属性没有任何

  local（）

  和

  format（）

  值和正确的

  eot

  格式将被IE8接受，并且不会进一步 下一个

  src

  属性中定义了哪些其他格式？还是会转到下一个

  src

  属性&从那里下载字体
• 如果在下一个

  src

  属性中有查询字符串（

  ？

  ）， IE8（也考虑兼容模式下的IE9）是否会下载两次

  eot

  font？如果没有 查询字符串，然后它将接受来自第一个属性的

  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（）

value都会使它们消失。。IE9在正常模式下会使用上述规则中的

eot

或

woff

？？如果它确实使用了

eot

，我们可以对first

src

属性进行如下细微更改：

@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');
}

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

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

IE9将忽略此属性，因为它包含

eot

，并进一步使用

woff

，对吗？另外，如果我再次像这样更改此规则本身：

@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');
}

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

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

IE9现在会使用

eot

格式还是继续使用

woff

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

@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上）可用字体，如果您的查看器没有安装该字体，那么他将无法看到正确的字体，有关这一点的更多信息，您可以选中此项：

我强烈希望编辑您的问题并添加“[引文需要]。首先感谢你甚至回答了我荒谬的问题。我仍然有点怀疑我们是否真的需要带有“？#iefix…”的行，因为“我不这么认为，因为IE9在兼容模式下承担了第一个src，所以IE6-IE8…应该吗？第一个src属性不包括任何format（）或local（）IE6-IE8无法识别的构造，因此这一行在这两种情况下都应该有效。你怎么说？欢迎@GauravRockrIf@you's on IE9，第二个src单独无法工作（因为IE6-IE8修复），所以你需要第一个。但是，事实上，我认为最好的答案是，对不起，我在结束之前发布了评论，现在我无法修改它