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

Mat*_*att 2 html javascript css font-face

我在网页上有一些内容使用有趣的字体来正确显示,使用@ font-face来使用一些自定义字体.我包含一条警告,指出它可能无法在所有浏览器上正确显示.内容对于页面来说并不是必不可少的,所以我真正喜欢的是,如果浏览器不打算这样做,由于浏览器版本,脚本阻塞或其他原因,我不想显示它.有没有办法做到这一点?

Jam*_*son 5

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/

要清楚,除了某些版本的Android之外,你几乎可以使用@ font-face支持每个浏览器. http://caniuse.com/#search=font

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