检测是否启用了 IE 中的字体下载答案

【问题标题】：detect if font download in IE is enabled检测是否启用了 IE 中的字体下载
【发布时间】：2011-12-19 21:07:35
【问题描述】：

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

目前，如果我要为字体渲染实现@font-face 解决方案（font-squirrel 或 typekit 或其他），如果 Internet Explorer 具有“字体下载”功能，所有浏览器都会运行良好除了 " 选项已禁用。

此设置可在 IE > Internet 选项 > 安全 > 自定义级别 > 下载 > 字体下载 > 启用/禁用中找到。

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

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

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

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

【问题讨论】：

标签： javascript internet-explorer font-face detect

【解决方案1】：

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

【讨论】：

这是我的第一个想法，但我们不能为这个特定项目使用任何服务器端脚本。无论如何，如何像@font-face 那样模拟字体下载？截至目前，我一直在尝试对字体本身进行 ajax 获取，即使禁用了字体下载，它也能正常获取和下载。
使用 JS 下载显然可以使用任何选项。您必须通过放置一个指向我解释的脚本的@font-face 来要求IE 下载字体，这样您就可以查看浏览器是否下载它。如果你不能在服务器上做任何事情，好吧，我相信你被搞砸了。

【解决方案2】：

基于@Zopieux 流程图，当字体下载被禁用时，我能够使该脚本适用于 IE6-9，在我的情况下，这是针对像其他公司 Intranet 一样禁用此设置的客户端。

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();
});

【讨论】：

【解决方案3】：

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

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

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

例如，如果您有用于显示星号的自定义字体，则合适的备用字体是 unicode 代码点 0x2605 ★。因此，在您的字体生成代码中，您需要将该代码点硬编码到您的星形图标的 css 类中。如果你使用“grunt-webfont”，你会在你的 grunt 文件中做这样的事情：

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

星星就是一个很好的例子；为您的精美图标找到合适的 UTF8 替代品可能具有挑战性，因此这可能不适用于所有人。考虑到这个问题影响到的用户非常少，我们认为这是一个合适的透明解决方案，不会影响普通用户的额外 js/css/cookie 垃圾。

【讨论】：