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

Question

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

编辑：我不确定这是页面的问题，还是我的浏览器的问题。无论哪种方式，我都需要修复它。

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

使用示例：

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

Answer 2

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

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

Answer 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'); 字体粗细：正常；字体样式：正常；}