字体在 IE 浏览器上不起作用

Posted 2023-03-06

【中文标题】字体在 IE 浏览器上不起作用

【英文标题】：Font face is not working on IE browser

【发布时间】：2013-01-21 09:55:12

【问题描述】：

我在 jquery 弹出窗口上应用了字体。它适用于 Chrome 和 Firefox，但不适用于 IE 浏览器。

Font Face Code in css
----------------------

@font-face 
font-family: "pt-sans";
    src: url("https://www.example.com/font/PTS55F.eot");
    src: local("pt-sans"),
     url("https://www.example.com/font/PTS55F.woff") format("woff"),
     url("https://www.example.com/font/PTS55F.ttf") format("truetype"),
     url("https://www.example.com/font/PTS55F.svg") format("svg"); 
 

Code added in .htaccess
----------------------

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

通过添加上面的代码字体在页面上工作，但是当我在弹出字体上尝试相同时，字体不起作用。

请帮帮我。

【问题讨论】：

明确哪个版本的 IE 不工作。

它不适用于 IE-9、IE-8 和 IE-7..

css 文件在https://www.mysite.com?

@MarkMartin：将format('embedded-opentype') 用于EOT 字体

@TomSarduy 这个建议也不适用于所有 IE 浏览器

【参考方案1】：

这是旧的 IE 错误 ;)

防弹@font-face 语法：

@font-face 
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    

什么？我不明白。

使这项工作有效的技巧是 EOT 文件名后面的 ?。 说真的。

浏览器兼容性

Safari 5.03、IE 6-9、Firefox 3.6-4、Chrome 8、ios 3.2-4.2、android 2.2-2.3、Opera 11

---

编辑： 看来您遇到了麻烦，我正在研究类似的问题，并且似乎 IE 无法使用在站点域之外托管的 @fontface 字体（如果页面位于 @987654321 @ - 出于某种原因，字体也必须在http://www.mysite.com) 中。将 EOT 文件放在您的域中，然后再试一次。

类似的问题也会有所帮助：

@font-face EOT not loading over HTTPS IE9 blocks download of cross-origin web font Make Adobe fonts work with CSS3 @font-face in IE9

他们很少有可能解决问题的方法。祝你好运！

【讨论】：

仍然不适合我...实际上这是在 html 页面上工作，但是当我在弹出文本上使用相同的字体时，它不显示预期的字体...

@MarkMartin：可能问题出在https，请检查：***.com/questions/11135282/…

我刚刚检查了 IE-7 上的控制台，显示以下错误 CSS3117：@font-face 跨域请求失败。资源访问受到限制。

【参考方案2】：

在 css 中试试这个字体代码：

@font-face
font-family:'pt-sans';
src:url('https://www.mysite.com/font/PTS55F.eot'); // IE9 Compat Modes
src:url('https://www.mysite.com/font/PTS55F.eot?#iefix') format('embedded-opentype'), // IE6-IE8
url('https://www.mysite.com/font/PTS55F.woff') format('woff'), // Modern Browsers
url('https://www.mysite.com/font/PTS55F.ttf') format('truetype'), // Safari, Android, iOS
url('https://www.mysite.com/font/PTS55F.svg#pt-sans') format('svg');  // Legacy iOS
font-weight:normal;
font-style:normal

或者您可以将您的字体上传到：http://www.fontsquirrel.com/fontface/generator 并获取 font-face kit 和 css，这也适用于所有浏览器。

【讨论】：

?#iefix 不适合我 :(

【参考方案3】：

这是我使用的代码。但我从不需要任何 htaccess 代码。从来没有遇到过任何问题。

@font-face 
    
    font-family: 'Robotothin';

    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#Robotothin') format('svg');

【参考方案4】：

这是一个老问题，但我觉得最好现在回答它，因为即使在应用了所有可能的解决方案之后，我也遇到了与 IE 相同的问题。我假设这里有问题的网站托管在本地服务器上，这本质上是 IE 的问题。我花了一段时间才意识到，但我注意到我的实时网站有工作字体，而我的本地版本没有。默认情况下，IE 通常会应用一个设置来在本地托管网站（Intranet）的浏览器中显示兼容性视图模式，这意味着某些样式可能无法按预期正常工作，而且导入的字体通常也无法正常工作。

要禁用此设置，请通过单击右上角的齿轮/齿轮图标进入 IE 菜单 > 兼容性视图设置，然后取消选中“在兼容性视图中显示 Intranet 站点。这应该可以解决未来访问者的问题在这里，我使用的是 IE11，但仍然会出现这种情况，因此未来几年可能会保持不变，因为 IE 现在也只有无限的标签页。

【参考方案5】：

此人/论坛的致谢： http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

IE11 遇到同样的问题，请在我的网站上使用字体 levenim。标题正确，一切都应如此。当我使用 CDN 或子域时，它不会加载，而在同一个域上时，它会完美加载。有什么问题？ 文件名。噗。

我使用 'lvnm-webfont' 作为文件基名，与字体名称不同。当它位于 CDN 或子域上时，它必须是 'levenim' 仅用于 IE。吃草对吧？我认为这与版权有关。

但是当它是版权字体时，它会加载但在从 CDN 或子域加载时不会使用，还有另一个问题。所以我对 IE 使用这个技巧只是为了加载字体（在 HTML 页面中）：

注意：字体必须存在于域和子域中，并且必须在任何其他 CSS 之后加载（仅限 IE）

<!--[if gte IE 7]]>
<style type="text/css">
@font-face 
    font-family: '__siteFont__';
    src: url('fonts/lvnm/lvnm-webfont.eot');
    src: local('☺'), url('fonts/lvnm/lvnm-webfont.woff') format('woff'), 
                     url('fonts/lvnm/lvnm-webfont.ttf') format('truetype'), 
                     url('fonts/lvnm/lvnm-webfont.svg#webfontTVnpYENL') format('svg');
    font-weight: normal;
    font-style: normal;

</style>
<![endif]-->

我可以做得更高效，因为我可以在模板和 CSS 中使用 IF 语句来避免额外的服务器查找（我的框架的一部分）。像这样的：

在 CSS 中：

/* #IF !$is_msie */
<load font from CDN>
/* #ENDIF */

在 HTML 中：

<!-- #IF $is_msie -->
<load font from domain>
<!-- #ENDIF -->

您也可以选择从您的域加载字体，但是当 css 文件是从子域提供时，您不能这样做，您在 IE 中遇到了同样的问题。在这种情况下，您需要在 HTML（模板）中添加样式标记，如上面的示例，但没有 IE 的条件注释。

希望对您有所帮助。