在IE8字体后备中使用的Web字体

我正在尝试在我构建的网站上实现web字体，我想用它作为font-family属性内的后备，即如果字符未在Arial/Helvetica中表示那么它应该在使用的webfont内。在IE8字体后备中使用的Web字体

我意识到这不会在IE6和7中工作，但预计它在IE8中工作，它似乎不太。

我只是想知道如果有人有过这个问题的任何经验，并且如果在IE8中使用webfont作为备用字体是可能的，或者任何人都可以看到我只是在代码中做错了什么。

在此先感谢，任何帮助

这里是我的CSS代码：

@font-face { 
    font-family: 'stix'; 
    src: url('/webfonts/webfont.eot'); 
    src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'stix'; 
    src: url('/webfonts/bold-webfont.eot'); 
    src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'stix'; 
    src: url('/webfonts/talic-webfont.eot'); 
    src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'stix'; 
    src: url('/webfonts/bold_italic-webfont.eot'); 
    src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg'); 
    font-weight: bold; 
    font-style: italic; 

} 

body { font-family: arial, helvetica, clean, stix, sans-serif} 
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }

来源

2011-03-02 Nick

错字，也许有所作为：/webfonts/talic-webfont.eot - > /webfonts/italic-webfont.eot – 2011-03-08 17:06:49

我正在使用精简版的代码（仅为了清晰起见 - 没有什么问题），并在很多浏览器中进行测试（webfont是STIX，就像你，不是我知道这是否起作用），而且我看到一些奇怪的行为：在大多数浏览器中字体回退确实工作，但只有当排除所有字体的斜体变体（斜体或粗体）。

I.e.这工作（时间的100％），与浏览器回落至STIX这些字符不是Arial字体：

@font-face { 
    font-family: 'stix'; 
    src: url('stixgeneral-webfont.eot'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'stix'; 
    src: url('stixgeneralbol-webfont.eot'); 
    font-weight: bold; 
    font-style: normal; 
} 
body {font-family: arial, stix, sans-serif;}

...但这样做的时候不工作100％（虽然有时它做显示字符）：

@font-face { 
    font-family: 'stix'; 
    src: url('stixgeneral-webfont.eot'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'stix'; 
    src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */ 
    font-weight: normal; 
    font-style: italic; 
} 
body {font-family: arial, stix, sans-serif;}

这样做的原因似乎是在STIX字体包有错误。

为了解决这个问题，在FontForge中打开您的STIX字体包并保存 - FontForge会通知您错误。修正这些，然后才导入到FontSquirrel中。字体后备应该现在可以正常工作。

来源

2011-03-04 11:19:00 dotcode

当它用作主字体而不是后备时，它是否正确地应用所有变体字体？ – 2011-03-08 17:27:21

尝试使用转换器上fontsquirrel.com

来源

2011-03-02 17:12:32 methyl

感谢您的答复甲基。它最初是使用fontsquirrel.com创建的，所以这不是问题。 – Nick 2011-03-03 09:58:49

什么是使用STIX作为后备的好处？

如果是为了防止UA下载字体，除非需要它，否则你运气不好，目前只有webkit有这种行为https://gist.github.com/478344更糟的是，IE会下载@ font-face中定义的所有字体，即使它们'没有在CSS中的其他地方引用。

如果是因为STIX没有常规字符，是的，IE会把你搞砸在这里。我建议将STIX与免费字体合并在一起，以创建一个包含所有需要的字符的交付物。

来源

2011-03-03 11:35:19

理想情况下，STIX的使用应该限制在小的或其他什么。有些JS可以在非数学unicode范围内查看它并且使用字符串字符。此代码只在IE中需要，并且后备将是该跨度的所有STIX。 – 2011-03-03 11:41:54

另一个建议是......尝试使用arial作为后备，而不是STIX。从STIX中删除常规字符，并查看IE是否回退到默认值。我很确定IE8会回退网页字体（我认为它只是IE6没有） – 2011-03-03 12:02:16

问题可能是“在Internet Explorer 8和早期版本中，only one URL value is supported”。

此外，不要使用@ font-face作为回退字体，而应选择一个您喜欢的字体，并且不要声明其中有序的“arial，helvetica”，而是直接回退到无衬线字体。这样，在每个平台上都会使用最适合的sans-serif，例如Arial for Windows和Helvetica for OS X等。

来源

2011-03-03 11:59:26 Marcel

Btw ... IE会尝试加载SVG格式，所以你应该在svg之后定义EOT src！（IE bug）。

来源

2012-04-21 12:04:11 xpepermint

在IE8字体后备中使用的Web字体

回答

相关问题