4

可能是一个奇怪的问题，在你回答之后，我可能会因为问这个而感到羞耻。

我的网站上嵌入了一种特定字体（通过@font-face），该字体用于仅在更宽的分辨率（桌面）上可见的部分。例如，在智能手机上，此部分不可见 ( display:none)。

该@font-face规则不是在媒体查询中定义的，而是在我的样式表的开头。

我现在想知道如果我在移动设备上查看该网站，是否可以避免加载这个嵌入的字体文件。

你知道。字体文件有一个视图 kb，我希望我的网站尽可能快。由于我的移动版本甚至不需要字体，我想知道是否

1.）字体现在甚至加载了吗？我不知道如何在我的 iPhone 上进行测试。由于使用它的部分设置为display:none我没有得到任何反馈。

2.) 如果已加载（我猜是这样），是否可以在with :中设置此@font-face声明（例如 iPhone），并且在这种情况下不会加载文件？media-querymax-width640px

关于这件事有什么想法吗？

先感谢您。

4

2 回答 2

2

1）图像在某些浏览器display:none中加载，而在其他一些浏览器中不加载。所以我想字体也是一样的。

2) FF 3.6 中有一个错误，但他们现在可能已经修复了。据我所知，支持媒体查询和@ff 的浏览器应该正确呈现它。

CSS 标准规定 @media 中的 At-rules 在 CSS2.1 中无效，但根据这篇文章，您可以使用 @import 和 media-target 声明加载外部文件，我猜是这样的：

@import url("fonts.css") screen and (min-width:800px);

但你知道，@import效果并不好。所以我只是不关心 CSS2 并假装在写 CSS3 ;​​-)

这家伙说在媒体查询中移动@ff 是可以的。

我相信最好的解决方案是将其放在min-width媒体查询中（不要忘记使用only关键字，该关键字旨在隐藏旧浏览器的媒体查询）。

使用min-width绝对比渐进增强max-width方法更适合，如果您的网站也是为移动设备设计的，那么它可能就是您想要使用的。

但正如其他人所说，测试是必须做的......并且也分享结果;-)

于 2012-09-23T09:41:00.480 回答
1

它似乎工作。没有在旧版本的 IE 中测试它（我正在使用modernizr 等来支持旧版本的媒体查询），但它可能会起作用。

我在@font-face需要它的媒体查询中直接定义规则。我用所有现代浏览器对其进行了测试。如果浏览器窗口很小并且没有触发媒体查询，则没有请求。一旦我将窗口大小调整为更大（我需要字体），它就会被加载。

正是我想要的。

于 2012-09-30T17:59:00.937 回答