css - 即使是 "bulletproof"@font-face 在 IE9 中也不工作(Apache 上的 wordpress 站点)

Question

我有一个(开发中，尚未上线)网站，其中的 Google 字体在除 IE 之外的所有浏览器上都能很好地工作......在我的例子中，IE9，但我怀疑其他 IE 也会受到影响。我不太关心与 IE<9 的向后兼容性，所以让我们把它留在“IE9 不工作!”

最初我指的是谷歌的托管字体，然后想知道这是否是问题所在，并使用 FontSquirrel 创建并下载了一个 webkit。太棒了，仍然适用于所有人但 IE。我仔细检查了那里所有的 CSS hack，尤其是 Paul Irish 的原始防弹语法 (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/) 和此处的更新版本:http://css-tricks.com/snippets/css/using-font-face/ .

没有骰子。

到目前为止，这是我的 css 适用于除 IE 以外的所有人:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 24, 2014 */


@font-face {
font-family: 'Open Sans';
src: url('opensans-regular-webfont.eot');   /* IE9 Compat Modes */
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),/* Modern Browsers */
     url('opensans-regular-webfont.ttf') format('truetype'),  /* Safari, Android, iOS */
     url('opensans-regular-webfont.svg#open_sansregular') format('svg');   /* Legacy iOS */
font-weight: 400;
font-style: normal;
}


@font-face {
font-family: 'Ubuntu';
src: url('ubuntu-bolditalic-webfont.eot');  /* IE9 Compat Modes */
src: url('ubuntu-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
     url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/OMD20Sg9RTs7sUORCEN-7dIh4imgI8P11RFo6YPCPC0.woff') format('woff'),/* Modern Browsers */
     url('ubuntu-bolditalic-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
     url('ubuntu-bolditalic-webfont.svg#ubuntubold_italic') format('svg'); /* Legacy iOS */
font-weight: 700;
font-style: italic;

}


@font-face {
font-family: 'Ubuntu';
src: url('ubuntu-italic-webfont.eot');  /* IE9 Compat Modes */
src: url('ubuntu-italic-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
     url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/djUe04BCq9zQJd4o6n2eG_esZW2xOQ-xsNqO47m55DA.woff') format('woff'),/* Modern Browsers */
     url('ubuntu-italic-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
     url('ubuntu-italic-webfont.svg#ubuntuitalic') format('svg'); /* Legacy iOS */
font-weight: 400;
font-style: italic;

}


@font-face {
font-family: 'Ubuntu';
src: url('ubuntu-bold-webfont.eot');  /* IE9 Compat Modes */
src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
     url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/nsLtvfQoT-rVwGTHHnkeJj8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),/* Modern Browsers */
     url('ubuntu-bold-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
     url('ubuntu-bold-webfont.svg#ubuntubold') format('svg'); /* Legacy iOS */
font-weight: 700;
font-style: normal;

}


@font-face {
font-family: 'Ubuntu';
src: url('ubuntu-medium-webfont.eot');  /* IE9 Compat Modes */
src: url('ubuntu-medium-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
     url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/gMhvhm-nVj1086DvGgmzBz8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),/* Modern Browsers */
     url('ubuntu-medium-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
     url('ubuntu-medium-webfont.svg#ubuntumedium') format('svg'); /* Legacy iOS */
font-weight: 500;
font-style: normal;

}


@font-face {
font-family: 'Ubuntu';
src: url('ubuntu-mediumitalic-webfont.eot');/* IE9 Compat Modes */
src: url('ubuntu-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
     url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/ohKfORL_YnhBMzkCPoIqwtIh4imgI8P11RFo6YPCPC0.woff') format('woff'),/* Modern Browsers */
     url('ubuntu-mediumitalic-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
     url('ubuntu-mediumitalic-webfont.svg#ubuntumedium_italic') format('svg'); /* Legacy iOS */
font-weight: 500;
font-style: italic;

    }



@font-face {
font-family: 'Ubuntu';
src: url('ubuntu-regular-webfont.eot');/* IE9 Compat Modes */
src: url('ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
     url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/hHs22WBTTzMhSqc5uBBDKg.woff') format('woff'),/* Modern Browsers */
     url('ubuntu-regular-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
     url('ubuntu-regular-webfont.svg#ubunturegular') format('svg'); /* Legacy iOS */
font-weight: 400;
font-style: normal;

}

我使用 f12 开发人员工具检查了控制台。纳达。我可以看到带有 css 的样式表被加载，但没有看到任何字体被加载。

啊哈!是 MIME 类型问题吗？好吧，我将厨房水槽添加到 .htaccess 文件中:

# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------

# allow access from all domains for webfonts
# alternatively you could only whitelist
#   your subdomains like "sub.domain.com"

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

# webfont mime types
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType application/x-font-woff              woff

# webfonts and svg:
<IfModule mod_deflate.c>
  <FilesMatch "\.(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

我还禁用了 Varnish 缓存，因为，嗯？少了一个变数。重新启动 Apache，natch。检查我的文档类型以确保它没有被复制。不，不是。为了以防万一，我什至添加了 IE-edge 元标记。哦，是的，我使用 html5shiv。

有人遇到过类似的难题吗？下一步建议？

谢谢，欢乐

Answer 1

我也遇到了同样的问题，我确认是IE安全区设置问题。一些企业有禁用某些 IE 安全区域的字体下载的组策略。

4 个典型区域是:

1. Intranet 区域 – 您本地网络上的站点。
2. 可信站点区域 – 已添加到您的可信站点的站点。
3. Internet 区域 – Internet 上的站点。
4. 受限站点区域 – 专门添加到受限站点的站点。

要检查您的页面在 IE9 中所在的区域，请右键单击该页面，然后选择属性。您应该会看到包含“区域”信息的一行。

解决方案:

1. 了解您的企业 IE 的安全区域或与管理您的浏览器设置的小组交谈。
   1. 提交请求将您的站点添加到 Intranet 或受信任的区域(如果这些区域允许字体下载)。
   2. 有些策略只需要您使用特定的域命名约定才能位于 Intranet 区域中。
2. 为您的盒子手动更改 IE 设置，以便您进行开发和测试。
   1. 如果您有权访问，IE > Internet 选项 > 安全选项卡 > 将特定站点添加到允许字体下载的区域。
   2. 如果“安全”选项卡被阻止，请获得临时管理员访问权限，打开“gpedit.msc”，然后深入到“计算机配置”>“管理模板”>“Windows 组件”>“Internet Explorer”>“Internet 控制面板”>“安全页面”> 双击“Site to区域分配列表” > 启用它，并在“值名称”列中添加您的域名，在“值”列中添加安全区域编号。上面分别列出了区域编号(例如 1 为 Intranet 区域)