检测 IE 中是否启用字体下载

Question

有没有办法检测 Internet Explorer 中的字体下载属性是否已禁用或启用？

目前，如果我要实现用于字体渲染的 @font-face 解决方案（font-squirrel 或 typekit 或其他），则所有浏览器都会播放良好除了（如果 Internet Explorer 禁用了“字体下载”选项） 。

这个设置可以在IE>中找到互联网选项>安全>自定义级别>下载>>字体下载>>启用/禁用。

如果我能检测到这个选项，我就可以回退到 javascript 方法。

这些解决方案不起作用，因为此选项实际上不会禁用该功能，它会阻止下载发生：

• http://paulirish.com/2009/font-face-feature-detection/
• http://www.lalit.org/ lab/javascript-css-font-detect/

编辑：我应该提到，我们不能不使用服务器端解决方案，它必须是纯粹的客户端脚本。

Answer 1

由于此功能会阻止下载发生，一个（相当肮脏的）解决方案是要求 IE 下载一种所谓的字体，该字体实际上是服务器上的一个简单脚本，其中包含例如。一个 cookie 说“好吧，他得到了字体”并返回一个空白页。当用户加载下一页时，如果 cookie 不存在，您将部署 Javascript 机制。

Answer 2

我意识到这个问题已经很老了，但对于一些具有严格 IT 安全性的企业互联网用户来说，这个问题仍然存在。我研究了上面的解决方案和其他解决方案，但它们对我来说效果不佳，所以我找到了另一个不需要服务器端代码、没有 javascript 和 css 的解决方案。它本质上很神奇，但也有一些局限性。

限制 1：这仅适用于使用高数字代码点来显示图像的图标字体。它不适用于可读文本的字体。

限制 2：您必须找到适合替换您的自定义图标的标准 UTF-8 符号。

例如，如果您有用于显示星形符号的自定义字体，则合适的后备方案是 unicode 代码点 0x2605 ★。因此，在字体生成代码中，您需要将该代码点硬编码到星形图标的 css 类。如果您使用“grunt-webfont”，您将在 grunt 文件中执行以下操作：

webfont: {
    icons: {
        options: {
           codepoints: {
              'star': 0x2605
       ...
}}}}

星号是一个完美的例子；为您的精美图标找到合适的 UTF8 替代品可能很困难，因此这可能并不适合所有人。考虑到这个问题影响极少数用户，我们认为这是一个合适的透明解决方案，不会因为额外的 js/css/cookie 问题而影响普通用户。

Answer 3

根据 @Zopieux 流程图，当禁用字体下载时，我能够使该脚本适用于 IE6-9，在我的例子中，该脚本适用于像其他公司内部网一样禁用此设置的客户端。

CSS：

@font-face {  
    font-family: 'TestFont';  
    src: url('/includes/font.php?type=eot');  
    src: url('/includes/font.php?type=eot#iefix') format('embedded-opentype'),  
     url('/includes/font.php?type=woff') format('woff'),
     url('/includes/font.php?type=ttf') format('truetype'),
     url('/includes/font.php?type=svg#UniversLTStd49LtUltraCn') format('svg');
    font-weight: normal;  
    font-style: normal;  
}  

PHP，当请求 font-face src url 时，它会提取此脚本，该脚本检查类型、设置 cookie 并提供所选的 webfont。如果启用了字体下载并且您没有重新路由到字体文件，IE 将抛出 @font-face 错误：

<?php
$type = $_REQUEST['type'];
$location = "Location: /includes/fonts/universltstd-lightultracn-webfont.".$type;

// create a cookie
setrawcookie("FontDownloaded", 1, time()+3600*24, '/');
header($location);

?>

JS，然后在客户端执行类似的操作来检查 cookie，并执行类似 cufon-yui.js 或 typeface.js 的替代方案：

$(function() {
    $('body').append('<span id="TestFont"/>');
    $('#TestFont').html('Testing').css({
        fontFamily: 'TestFont',
        opacity: 0
    });

    // find cookie
    bool = Boolean(getCookie('FontDownloaded')); // use your own cookie method

    if (!bool) {
        // implement @font-face fallback        
        Cufon.replace('.items', { fontFamily: 'NewFont' });
    }
    $('#TestFont').remove();
});