在将此标记为重复之前,请仔细阅读我的疑问。我在网上(特别是stackoverflow)进行了彻底的搜索,但无法澄清疑点。这个问题可能一眼看去很长,但它包含了其他人也想知道的关键问题。
我正在尝试获得有关防弹字体规则
因此,这里是最新的防弹代码,由Font-Spring(http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/)建议,同时解决了IE9兼容性模式问题:
无论是在IE8还是IE9兼容模式下,
我正在尝试获得有关防弹字体规则
@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');
}
目前,我正在阅读Peter Gasston的《CSS3之书》。它遵循Font-Spring所述的“弹性规则”,并带有IE9兼容模式修复。他说,在第二个src
属性中带有查询字符串?
的规则负责IE9 Compat. Mode fix。但是,font-spring认为第一个src
属性负责IE9 Compat. Mode fix。如果不完全理解该语法,我将无法学习。
我的严重问题相对较小。首先,我想知道是否只有?#iefix
可以防止解析错误,还是像?iefix
(没有#
)或?xyz
或?#abc
之类的东西也可以?必须写?#iefix
吗?
其次,
- 我无法感受到这个
@font-face
规则是如何解析的,IE8如何决定使用哪个src
属性来使用eot
字体。如果IE9在兼容模式下没有解析问题,那么它将如何决定使用哪种字体格式?IE9在兼容模式下会因为查询字符串字体url而出错吗?如果不会,那么为什么不会? - 有人能告诉我,如果我看整个防弹规则声明,IE8、IE9在兼容模式下、正常模式下和其他浏览器将如何解析它?如果浏览器支持多种字体,它将如何决定使用哪一种?浏览器查找
url
值和src
属性的顺序是什么? - 一个独立的
src
属性,没有任何local()
和format()
值,并且具有正确的eot
格式,是否会被IE8接受,并且不会进一步下载定义了其他格式的下一个src
属性?还是它仍然会转到下一个src
属性并从那里下载字体? - 如果下一个
src
属性中有查询字符串(?
),IE8(考虑到IE9在兼容模式下)会下载两次eot
字体吗?如果没有查询字符串,那么它是否会从第一个属性接受eot
字体而不会出错?还是它会出错,并且不适用任何自定义定义的字体,即使是来自第一个src
属性?
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
?
这就是我想知道的,是的,我认为这些问题肯定需要一个答案。