IE9 中的这些@font-face 字体有什么问题？答案

【问题标题】：What is wrong with these @font-face fonts in IE9?IE9 中的这些@font-face 字体有什么问题？
【发布时间】：2013-02-13 14:50:58
【问题描述】：

由于某种原因，当我在 IE9 中查看 this page 时，所有的 @font-face 字体看起来都比它们应该的要小得多，而且可能也像不同的字体。据我所知，关于我的语法的一切都应该与 IE9 合作。其他人在复制问题时遇到了麻烦，所以也许是我的 Windows 字体设置中的问题？无论哪种方式，如果您想尝试复制我所看到的，我在 Windows 7 64 位上运行 IE9。

编辑：我不确定这是页面的问题，还是我的浏览器的问题。不管怎样，我需要把它修好。

【问题讨论】：

好吧，我签入了 ie8 win 64bit，看起来不错
无法在我的 Windows 7 64 位机器上的 IE 9 中重现。
可能是我机器上的某些设置有问题。我仔细检查了 IE 的字体设置是否为默认设置，我尝试关闭 ClearType，然后重新打开。没运气。我不知道我会检查哪些其他设置。

标签： css internet-explorer-9 font-face embedded-fonts webfonts

【解决方案1】：

在 IE9 中对我来说与其他浏览器一样，由于名称不同（HelveticaMD 与 CSS 中使用的实际名称，Helvetica），没有使用嵌入字体。

看起来您的“错误”屏幕截图是浏览器尝试实际使用嵌入字体，而“正确”屏幕截图只是默认字体。如果这就是你想要的，只需摆脱字体嵌入的东西。

【讨论】：

【解决方案2】：

@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 */
    }

用法示例：

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
 }
 p {font-family: MyFont, serif;
 }

【讨论】：

谢谢，但我已经看过这个语法了。我已经尝试过这个以及其他几种语法，但似乎没有任何改变。

【解决方案3】：

.woff 解决了 IE9 中的问题。我已经将 .eot 用于 chrome 和 firefox。和 .woff 用于 IE9。现在 3 个浏览器工作正常并显示相同的结果。以下是 CSS 中的代码。 @font-face {font-family: 'cert_fonts'; src: url('../fonts/GoudyTrajan.eot') 格式('eot'); src: url('../fonts/GoudyTrajan.woff') 格式('woff');字体粗细：正常；字体样式：正常；}

【讨论】：