Question

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

我正试图在防弹@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”。它符合防弹规则，具有 IE9兼容模式修复，如Font-Spring所述。他说第二个?属性中带有查询字符串src的规则负责IE9 Compat。模式修复。但是，font-spring拥有负责IE9 Compat的第一个src属性。模式修复。如果不完全理解它，我就无法学习这种语法。

我的严重问题相当小。首先，我想知道是否只有?#iefix可以阻止解析错误，或者它可能类似于?iefix（没有#），或者它可能是?xyz或{{ 1}}。是否有必要准确撰写?#abc？

其次，

我无法理解如何解析此?#iefix规则，如何解析 IE8决定@font-face中的哪一个属性用于src字体。如果IE9在解析时没有问题兼容模式，它将如何决定使用哪种字体格式？将兼容模式下的IE9在查询字符串字体url＆amp;如果不那为什么不呢？
如果我看一下所说的整个防弹规则，有人可以告诉我以上，如何IE8，IE9在兼容模式下，IE9在正常模式下＆amp;其他浏览器会解析它吗？如果浏览器支持大多数字体，浏览器将如何决定使用哪种字体？浏览器查看eot值和url属性的顺序是什么？
是否就像没有src和src的单独local()属性一样 IE8将接受format()值和正确的eot格式，并且不会更进一步到下一个src属性，其中定义了其他格式？或者它仍会转到下一个src 财产和从那里下载字体？
如果下一个?属性中有查询字符串（src），将IE8（兼容模式下的IE9考虑）下载eot字体两次？如果没有查询字符串，然后它将接受来自第一个属性的eot字体并且不会破坏或将破坏＆amp;不要应用任何自定义字体甚至来自第一个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：那是＆＃34; old＆＃34;防弹语法，你已经熟悉它了。请注意，正如Fontspring关于强化规则的博客文章所述，微软在使用IE7和IE8渲染模式时修复了IE9中的错误，但他们并没有真正修复IE7和IE8所以你仍然需要这些技巧浏览器。

关于local()的澄清：这告诉浏览器使用某个本地（即在页面查看器的PC上）可用字体，如果您的查看者没有安装它，那么他＆＃39; ll无法看到正确的字体，有关此内容的详情，请查看：http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley

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

1 个答案: