有没有办法检测用户的浏览器是否支持@ font-face？ [英] Is there a way to detect whether a user's browser is supporting @font-face?

问题描述

我在网页上有一些内容，通过使用@ font-face使用一些自定义字体，使用有趣的字体正确显示。我包含警告，它可能无法在所有浏览器上正确显示。内容对于页面来说不是必须的，所以我真的想做的只是不显示它，如果浏览器不会这样做，由于浏览器版本，脚本阻塞或任何。有办法吗？

I have some content on a web page that uses funny fonts to display correctly by using @font-face to use some custom fonts. I include a warning that it might not display correctly on all browsers. The content isn't really essential to the page, so what I'd really like to do instead is simply not show it if the browser isn't going to do it, due to browser version, script blocking, or whatever. Is there a way to do that?

推荐答案

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

Modernizr has this built-in. Here's a link to a build that just checks for @font-face support. http://modernizr.com/download/#-fontface-shiv-cssclasses-teststyles-load

然后你可以在JS中检入 Modernizr.fontface 或者在 .fontface {} 的css中。

Then you can check in JS for Modernizr.fontface or in the css for .fontface { }.

这里有一个关于如何做的奇怪解释：
http://paulirish.com/2009/font-face-feature-detection/

Here's a fancy explanation of how to do it: http://paulirish.com/2009/font-face-feature-detection/

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

To be clear you can pretty much support every browser with @font-face, except for some versions of Android. http://caniuse.com/#search=font

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

Your bigger problem with @font-face isn't the basic support for @font-face, but support for the specific font file type, which is more limited. I personally suggest to use WOFF, which works in IE9+. Alternatively, if you use Typekit or Font-Squirrel you can pretty much support all browsers out of the box.

这篇关于有没有办法检测用户的浏览器是否支持@ font-face？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！