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?
相关问题
- Views base64 encoded blob in HTML with PHP
- Is there a limit to how many levels you can nest i
- How to toggle on Order in ReactJS
- void before promise syntax
- Keeping track of variable instances
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
Then you can check in JS for
Modernizr.fontface
or in the css for.fontface { }
.Here's a fancy explanation of how to do it: http://paulirish.com/2009/font-face-feature-detection/
To be clear you can pretty much support every browser with @font-face, except for some versions of Android. http://caniuse.com/#search=font
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.