javascript 检测是否启用了 IE 中的字体下载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7973421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
detect if font download in IE is enabled
提问by Scorpius
Is there a way to detect whether the font download property in internet explorer is disabled or enabled?
有没有办法检测 Internet Explorer 中的字体下载属性是禁用还是启用？
Currently if I were to implement an @font-face solution (font-squirrel or typekit or other) for font-rendering, all browsers will play nice exceptif internet explorer has its "Font Download" option disabled.
目前，如果我要为字体渲染实施 @font-face 解决方案（font-squirrel 或 typekit 或其他），所有浏览器都可以正常运行，除非Internet Explorer 禁用了“字体下载”选项。
This setting can be found in IE > Internet Options > Security > Custom Level > Downloads > Font download > Enable/Disable.
可以在 IE > Internet 选项 > 安全 > 自定义级别 > 下载 > 字体下载 > 启用/禁用中找到此设置。
If I can detect this option, I could fall back to javascript methods.
如果我能检测到这个选项，我可以回退到 javascript 方法。
These solutions do not work as this option does not actually disable the feature, it prevents a download from occurring:
这些解决方案不起作用，因为此选项实际上并未禁用该功能，它会阻止下载发生：
- http://paulirish.com/2009/font-face-feature-detection/
- http://www.lalit.org/lab/javascript-css-font-detect/
- http://paulirish.com/2009/font-face-feature-detection/
- http://www.lalit.org/lab/javascript-css-font-detect/
EDIT: I should mention that we cannot not use a server-side solution, it must be purely client-side scripting.
编辑：我应该提到我们不能不使用服务器端解决方案，它必须是纯粹的客户端脚本。
采纳答案by zopieux
As this feature prevents a download from occurring, a (rather dirty) solution would be to ask IE to download a so-called font that is actually a simple script on your server that puts eg. a cookie saying “ok he gots the font” and returns a blank page. When the user loads the next page, you will deploy the Javascript machinery if the cookie isn't there.
由于此功能可防止发生下载，因此（相当肮脏的）解决方案是要求 IE 下载所谓的字体，该字体实际上是您服务器上的一个简单脚本，例如。一个 cookie 说“好的，他得到了字体”并返回一个空白页面。当用户加载下一页时，如果 cookie 不存在，您将部署 Javascript 机制。
回答by Jake
I realize this question is old, but this problem still exists for some corporate internet users with strict IT security. I looked into the solutions above and others, but they didn't work well for me, so I found another solution that requires no server side code, no javascript, and no css. Its essentially magic, but it has some limitations.
我意识到这个问题很老了，但是对于一些 IT 安全要求严格的企业互联网用户来说，这个问题仍然存在。我查看了上面的解决方案和其他解决方案，但它们对我来说效果不佳，所以我找到了另一个不需要服务器端代码、不需要 javascript 和 css 的解决方案。它本质上是魔法，但它有一些局限性。
Limitation 1: This will only work for icon-fonts that use high number codepoints to display images. It will not work for typeface fonts for readable text.
限制 1：这仅适用于使用大量代码点来显示图像的图标字体。它不适用于可读文本的字体。
Limitation 2: You must find a standard UTF-8 symbol that is a suitable replacement for your custom icon.
限制 2：您必须找到适合替代自定义图标的标准 UTF-8 符号。
For example, if you have a custom font that you use to display a star symbol, a suitable fallback for this would be unicode code point 0x2605 ★. So, in your font generation code, you would need to hard code that codepoint to your css class for your star icon. If you were using "grunt-webfont" you would do something like this in your grunt file:
例如，如果您有一个用于显示星号的自定义字体，那么合适的后备方案是 unicode 代码点 0x2605 ★。因此，在您的字体生成代码中，您需要将该代码点硬编码到您的星形图标的 css 类。如果你使用“grunt-webfont”，你会在你的 grunt 文件中做这样的事情：
webfont: {
icons: {
options: {
codepoints: {
'star': 0x2605
...
}}}}
The star is a perfect example; it may be challenging to find a suitable UTF8 replacement for your fancy icons so this may not work for everyone. Considering that this problem affects a very small number of users, we felt that this was a suitable transparent solution that did not impact regular users with extra js/css/cookie cruft.
明星就是一个完美的例子；为您喜欢的图标找到合适的 UTF8 替代品可能具有挑战性，因此这可能不适用于所有人。考虑到这个问题影响的用户很少，我们觉得这是一个合适的透明解决方案，不会影响普通用户额外的js/css/cookie cruft。
回答by Scorpius
Based on @Zopieux flow chart, I was able to make this script work for IE6-9 when font-downloading is disabled, which in my case was for a client where like other corporate intranets have this setting disabled.
根据@Zopieux 流程图，当禁用字体下载时，我能够使该脚本适用于 IE6-9，在我的情况下，这是针对像其他公司内部网一样禁用此设置的客户端。
CSS:
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, when the font-face src url is requested, it pulls this script, which checks the type, sets the cookie, and serves the webfont of choice. If font-downloading is enabled and you do not re-route to the font file, IE will throw up an @font-face error:
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, then on the client side, do something like this to check for the cookie, and perform the alternative like cufon-yui.js or typeface.js:
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();
});
