有没有办法检测用户的浏览器是否支持@font-face？

【问题标题】：Is there a way to detect whether a user's browser is supporting @font-face?有没有办法检测用户的浏览器是否支持@font-face？
【发布时间】：2012-05-07 12:44:35
【问题描述】：

我的网页上有一些内容使用有趣的字体来正确显示，方法是使用@font-face 来使用一些自定义字体。我包含一个警告，它可能无法在所有浏览器上正确显示。内容对页面来说并不是真正重要的，所以我真正想做的就是如果由于浏览器版本、脚本阻塞或其他原因，浏览器不打算这样做，则根本不显示它。有没有办法做到这一点？

【问题讨论】：

是，使用：modernizr.com
我无法想象为什么这是必要的。从 IE 4 开始支持 @font-face。(4!)
但如果您关闭了脚本或 NoScript 不允许该站点，它不会执行您的@font-face。
对不起，但如果这只是为了显示“一些对页面来说并不重要的内容”，我认为使用 webfonts 完全是矫枉过正。创建图像可能会节省带宽。
是的，如果内容是静态的。这取决于用户的输入。

标签： javascript html css font-face

【解决方案1】：

Modernizr 内置了这个功能。这是一个只检查@font-face 支持的构建的链接。 http://modernizr.com/download/#-fontface-shiv-cssclasses-teststyles-load

然后您可以在 JS 中检查 Modernizr.fontface 或在 css 中检查 .fontface { }。

以下是如何做到这一点的精彩解释： http://paulirish.com/2009/font-face-feature-detection/

需要明确的是，您几乎可以使用@font-face 支持所有浏览器，但某些版本的 Android 除外。 http://caniuse.com/#search=font

您对@font-face 的更大问题不是对@font-face 的基本支持，而是对特定字体文件类型的支持，这是比较有限的。我个人建议使用 WOFF，它适用于 IE9+。或者，如果您使用 Typekit 或 Font-Squirrel，您几乎可以支持所有开箱即用的浏览器。

【讨论】：