@Font-face 不工作

Question

我一直在网上查看是否有其他人遇到过同样的问题并且他们有，但是当我使用已回答的代码时，它仍然无法正常工作，我想这是 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”并添加了所有类型的文件，但仍然无法正常工作。

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

Answer 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 中，如果将链接放在标签之后，整个页面将被阻塞，直到字体加载完毕后才会显示任何内容。