@Font-face 不工作

Posted 2023-03-06

【中文标题】@Font-face 不工作

【英文标题】：@Font-face not working

【发布时间】：2014-10-12 11:34:08

【问题描述】：

我一直在网上查看是否有其他人遇到过同样的问题并且他们有，但是当我使用已回答的代码时，它仍然无法正常工作，我想这是 IIS 中的问题。

我已将此字体添加到我的 CSS 中。

@font-face 
font-family: 'Open Sans';
src: url('../Font/OpenSans-Light.eot'); /* IE9 Compat Modes */
src: url('../Font/OpenSans-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../Font/OpenSans-Light.woff') format('woff'), /* Modern Browsers */
     url('../Font/OpenSans-Light.ttf')  format('embedded-opentype'), /* Safari, android, ios */
     url('../Font/OpenSans-Light.svg#svgFontName') format('svg'); /* Legacy iOS */

我已经创建了包含我的字体文件的文件夹。

我查看了 IIS 上的“MIME TYPES”并添加了所有类型的文件，但仍然无法正常工作。

有没有其他人遇到过这个问题并且可以帮助我。

【问题讨论】：

如果有帮助，请告诉我。 :)

@AlexIncarnati 不在办公室，我已经回复了，谢谢。

【参考方案1】：

从 IIS 服务器提供字体

如果您从 IIS 服务器提供字体，则需要将 MIME 类型为“application/x-font-woff”的“.woff”添加到 IIS 安装中，即使 WOFF 没有MIME 类型。 IIS 拒绝提供它没有 MIME 类型的任何东西。

IIS 6+

.woff application/x-woff
.svg image/svg+xml

IIS 7.5

.ttf    application/font-sfnt
.eot    application/vnd.ms-fontobject
.otf    application/font-sfnt
.woff   application/font-woff

因此，既然它是您使用的 google 字体，您是否尝试过将其加载到

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

或CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

然后在你的样式表中使用它？

font-family: 'Open Sans', sans-serif;

此外，如果您打算将其加载到 IE 上，请从 google 字体文档中粘贴：

注意： 为了在 IE 中获得最佳显示效果，请将样式表标签设置为 html 部分中的第一个元素。在 IE 中，如果将链接放在标签之后，整个页面将被阻塞，直到字体加载完毕后才会显示任何内容。

【讨论】：

我已将文件格式添加到 IIS 中，然后在我的 HTML 顶部添加了该行，但它仍然无法正常工作。

当我在 IIS 上重新启动站点时，它似乎正在删除它。

是否删除了这个 ？

我以为它正在删除 MIME 文件类型，但事实并非如此。我不明白为什么它不起作用。

它可以在 Chrome 上运行，因为我刚刚测试过它只是它在 IE 上不起作用。是css行的顺序吗？