Internet Explorer 11和支持的Web字体

Question

我正在使用TTF和OTF网络字体，在大多数设备上捕捉所有主要浏览器（FireFox，Chrome和IE11）。在将其转移到生产服务器之前，一切看起来都很好，但IE不想显示我的图标。

我猜测，Redmond的大脑有某种功能可以阻止它在互联网上工作，因此它仅在本地主机上运行。

这是怎么回事？我需要使用什么样的字体类型来适应IE？

- Luke Puplett

---

请在Internet Explorer中使用EOT字体... - Rohit Suthar

伙计，如果你认为这是正确的，就发布一个适当的答案。我不明白为什么那么多人将答案发布为评论。 - Luke Puplett

顺便提一下，过去我曾遇到TTF文件的权限问题，其中某些位必须在TTF文件本身中翻转才能在生产中使用。根据您对该问题的描述，我认为这就是您遇到的问题。请参见此处的讨论：https://dev59.com/_WUo5IYBdhLWcg3wzSIq - Ringo

Answer 1

这是使用 @font-face 的标准加载方式，包括 hacky 修复方法在内 -

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

嗨，请查看兼容性表以了解EOT的支持情况，检查以下链接 -

链接1

链接2

- Rohit Suthar

---

不错！还没有使用过，一直在尝试WOFF和重新发布，已经在所有浏览器上都成功了，除了Windows Phone 8 IE。顺便问一下，webfont.eot?#iefix是什么意思？ - Luke Puplett

这是因为IE8及以下版本解释字体声明的方式不同。在这些版本的IE中，常规的url('webfont.eot')将导致404服务器错误，添加?#iefix可以解决服务器问题。 - Rohit Suthar

如果您只想支持IE11和Evergreen，那么我们是否仍然需要这个？ - SuperUberDuper

谢谢您，先生，感谢您的高级回答！ - AlexKh

.woff2 是用在哪个环境中的？我的意思是哪种编程环境？ - funky-nd

woff2 是一种字体格式，平均可减少 30% 的文件大小，因此有助于在不兼容的浏览器中更快地加载 Web 字体。它旨在提供轻量级、易于实现的字体数据压缩，适用于与 CSS 一起使用。 - Rohit Suthar

Answer 2

请注意一件事：如果CSS中的字体族名称与字体名称不同，则在IE中字体将无法正常工作！如果您不了解此问题，可能会非常令人沮丧，我曾花了一整天的时间才弄清楚它！

对于IE 6-11，请使用EOT字体，但请注意其他浏览器不支持它。

对于IE >=9和所有其他浏览器，请使用woff字体，因为它具有最广泛的支持和最佳的压缩效果，是专门为Web设计的。

如下所示：

@font-face {
    font-family: 'FontName';
    src: url('FontName.eot');  /* IE 9 - 11 */
    src: url('FontName.eot?#iefix') format('embedded-opentype'), /* IE Fix for IE 6-8*/
         url('FontName.woff') format('woff'); /* IE 9-11 & All Modern Browsers */
}

- beliha