问题
Probably a weird question and after your answers I might be ashamed for asking this.
I have a specific font embedded on my website (via @font-face) this font is used for a section that is only visible on wider resolutions (desktops). On Smartphones for example, this section is not visible (display:none).
The @font-face rule is not defined within a media-query but right at the beginning of my stylesheet.
I wonder now if it would be possible to avoid loading this embedded font-file if I'm viewing the site on a mobile device.
You know. The font-file has a view kb and I want my site to be as fast as possible. Since the font wouldn't even be needed on my mobile version I wonder if
1.) the font is even loaded at the moment? I have no idea how to test this on my iPhone. Since the section where it is used is set to display:none I don't get any feedback.
2.) If it is loaded (and I guess so) would it be possible to set this @font-face declaration inside a media-query with max-width : 640px (e.g. iPhone) and the files wouldn't be loaded in this case?
Any ideas on that matter?
thank you in advance.
回答1:
1) Images with display:none are loaded in some browsers and in some others not. So i guess it's the same for fonts.
2) There is a bug in FF 3.6, but they probably have fixed it nowadays. As far as i know, browsers supporting both media-queries and @ff should render it correctly.
CSS standards dictate that At-rules inside @media are invalid in CSS2.1, but according to this post you can load an external file with @import and a media-target declaration, i guess this way:
@import url("fonts.css") screen and (min-width:800px);
But you know, @import doesn't work that well. So i just wouldn't care about CSS2 and pretend to be writing CSS3 ;-)
This guy says that it's ok to just move @ff inside a media query.
I believe the best solution is to put it inside a min-width media query (don't forget to use the only keyword, which is intended to hide media queries from older browsers).
Using min-width is definitely more suitable than max-width for a progressive enhancement approach, and if your site is designed for mobile devices too it's probably what you want to use.
But as others said, testing is a must-do ... and sharing the results too ;-)
回答2:
It seems to work. Didn't test it in older Versions of IE (I'm using modernizr, etc. for media-query support in older brosers) but it might work.
I'm defining the @font-face rule directly inside the mediaquery where it is needed. I tested it with all modern browsers. There is no request if the browser window is very small and the media-query isn't triggered. Once I resize the window to a larger with (where I need the font) it is loaded.
Just what I wanted.
来源：https://stackoverflow.com/questions/12551049/css-mediaqueries-defining-font-face-inside-a-certain-min-to-max-range-is-this