@font-face 不适用于在 XP 上运行的 IE答案

【问题标题】：@font-face not working with IE running on XP@font-face 不适用于在 XP 上运行的 IE
【发布时间】：2013-02-20 16:40:42
【问题描述】：

问题示例：http://www.osdev.org/squirrel/card.html

问题样本2：http://www.osdev.org/squirrel/dejavusans-demo.html

我希望使用 Unicode 6 U+1F0A0–1F0FF 范围（Playind Card Block）http://unicode.org/charts/PDF/U1F0A0.pdf 中的符号，但即使是 ascii 范围的字符也不会在字体中呈现，并且在 IE/XP 上使用的任何字体没有扑克牌块的符号。

DejaVu Sans 2.33 版新增扑克牌，ttf 字体可在http://dejavu-fonts.org/wiki/Main_Page 获取。

我已经尝试了所有能找到的 EOT 生成器。第二个示例是http://www.fontsquirrel.com生成的演示页面。
我尝试过只制作 IE 页面，以防 CSS 字体 url 没有被正确提取。
在通过 eot 生成器运行字体之前，我已在原始 ttf 上使用 FontForge 使所有系列、唯一名称等匹配。

如果我在本地安装 ttf（在 Windows XP 字体文件夹中），我可以使用没有 font-face 的 css font-family 在 IE 中显示字体，但我不能要求所有人都这样做。

Windows 7 上的 IE8 似乎可以工作，但 Windows XP 上的 IE6、IE7 和 IE8 都失败了。就像 font-face 在 XP 上没有任何作用。

有什么建议吗？我先在http://www.fontsquirrel.com 论坛上问过，但没有收到任何回复。

编辑：澄清一下，XP 上的 IE 将扑克牌呈现为一个空方块，与系统无法显示任何字符时使用的“空白”符号相同。

【问题讨论】：

标签： internet-explorer fonts font-face webfonts

【解决方案1】：

查看您的服务器设置。我在 Mac 上使用 Chrome，所以我实际上无法“看到”您的问题。

但我查看了您字体文件的响应标头中的内容类型。这是Content-Type: text/plain; charset=UTF-8。我认为这是你的问题。

您应该更改服务器的设置以使响应具有正确的Content-Type。或者 IE 可能认为该文件不是有效的字体文件。

试试谷歌“字体文件内容类型”了解更多信息。

而且我认为这也会对您有所帮助。 https://stackoverflow.com/a/10864297/1061004

【讨论】：

谢谢，但 eot 格式已经返回 application/vnd.ms-fontobject 作为 Content-Type。我确实继续添加了 woff 和 ttf 的类型，但这没有任何区别。

【解决方案2】：

包括两种字体，第一种用于IE，其余用于所有其他浏览器。

@font-face {
  font-family: "SocialFoundicons";
  src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SocialFoundicons";
  src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"),
   url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot?#iefix") format("embedded-opentype"),
   url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.woff") format("woff"), 
   url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.ttf") format("truetype"), 
   url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.svg#SocialFoundicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

【讨论】：