Internet Explorer 中的 CSS 字体问题答案

【问题标题】：css font issue in internet explorerInternet Explorer 中的 CSS 字体问题
【发布时间】：2011-05-18 09:48:26
【问题描述】：

我在 CSS 中使用以下代码来呈现字体，但它在 IE 中不起作用

@font-face{font-family: BELOVED; src: url('font/BELOVED.TTF');}

有什么建议吗？

【问题讨论】：

它在本地服务器上，无法为您提供链接（本地主机）

标签： css internet-explorer user-interface

【解决方案1】：

不幸的是，IE 不支持 TTF 字体，因此您还需要使用 EOT，支持的类型/浏览器是

Internet Explorer（所有版本）：EOT
Safari (3.2+)：TTF / OTF
iPhone (3.1) SVG
Chrome（所有版本）：SVG（TTF/OTF 添加于 2010 年 1 月 25 日）
Firefox (3.5+)：TTF/OTF（.WOFF 添加到 3.6）
Opera (10+) TTF/OTF

我在字体方面的成功有限，但我希望这会有所帮助。

【讨论】：

【解决方案2】：

您最好访问 fontsquirrel.com 并创建一个 @font-face 工具包，这样您就可以获得最大的跨浏览器。 paul irish 还有一个漂亮的防弹跨浏览器示例，说明如何正确嵌入@font-face。

【讨论】：

【解决方案3】：

IE 不支持TTF file format（2016 年 3 月更新）。

Here is a tool 将您的 TTF 转换为 EOT。

【讨论】：

【解决方案4】：

很容易解决转到此链接http://www.fontsquirrel.com/fontface/generator

上传你的字体

然后下载所有具有不同字体格式的文件，这些文件支持不同的浏览器并在您的项目中使用。现在它可以在所有浏览器中正常工作

【讨论】：

【解决方案5】：

坏消息：IE 不支持 TTF 格式的标准字体。（我一直对 IE 的使用难度感到惊讶）

好消息：IE 确实支持称为 EOT 的替代字体格式。您需要提供两种格式的字体并修改您的 CSS 以同时指定它们。

@font-face {  
    font-family: Beloved;  
    src: url(/location/of/beloved.eot); /* IE */  
    src: local(Beloved), url(/location/of/beloved.ttf) format("truetype"); /* non-IE */  
}

一般来说，您应该能够将您的 TTF 字体转换为 EOT 格式而没有太多问题，但您可能会发现有些字体是无法转换的。在这种情况下，你就不走运了。

【讨论】：