可能是一个奇怪的问题，在你回答之后我可能会因为问这个问题而感到羞愧。
我的网站上嵌入了一种特定字体(通过 @font-face)，该字体用于仅在较宽分辨率(桌面)上可见的部分。例如，在智能手机上，此部分是不可见的 (display:none)。
@font-face 规则不是在媒体查询中定义的，而是在我的样式表的开头定义的。
我现在想知道如果我在移动设备上查看网站是否可以避免加载这个嵌入的字体文件。
你知道的。字体文件有一个 View kb，我希望我的网站尽可能快。由于我的移动版本甚至不需要字体，我想知道是否
1.) 现在甚至加载了字体？我不知道如何在我的 iPhone 上测试它。由于使用它的部分设置为 display:none 我没有收到任何反馈。
2.) 如果它被加载(我猜是这样)，是否可以在 media-query 中设置此 @font-face 声明与 max-width : 640px (e.g. iPhone) 在这种情况下文件不会加载？
有什么想法吗？
提前致谢。
最佳答案
1) 带有display:none 的图像是loaded in some browsers and in some others not .所以我想字体也是一样的。
2) 有一个bug在 FF 3.6 中，但他们现在可能已经修复了它。据我所知，同时支持媒体查询和@ff 的浏览器应该正确地呈现它。
CSS standards指示 @media 中的 At 规则在 CSS2.1 中无效，但是 according to this post您可以使用@import 和媒体目标声明加载外部文件，我猜是这样的:
@import url("fonts.css") screen and (min-width:800px);
但是你知道，@import 并不是那么好用。所以我只是不关心 CSS2 并假装在写 CSS3 ;-)
This guy 表示只需将 @ff 移动到媒体查询中即可。
我认为最好的解决方案是将它放在 min-width 媒体查询中(不要忘记使用 only 关键字, which is intended to hide media queries from older browsers ).
对于 progressive enhancement，使用 min-width 绝对比 max-width 更合适方法，如果您的网站也是为移动设备设计的，那么它可能就是您想要使用的。
但正如其他人所说，测试是必须做的 ...并分享结果;-)
关于performance - CSS 媒体查询 : Defining font-face inside a certain min to max range - is this font loaded outside?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12551049/