css - 我可以在 CSS Optional 中为移动设备加载字体吗？

Question

我目前的网站设计是使用 Bootstrap 响应式框架构建的。它使用了几种自定义字体，约占文档大小的 50%。字体通过CSS包含，包含方式不能改变。

我现在的目标是阻止移动设备请求这些字体，以减少它们的带宽消耗。

是否有像 @media (min-width: 480px) 这样的 CSS 方式来不在响应式布局中加载字体？

Answer 1

在大多数实现中，CSS 媒体查询中引用的背景图像会被预先下载。 (除非您使用 display:none; do some fiddling，但并非所有浏览器都支持。)

这同样适用于您通过媒体查询包含的任何字体——即使它们是为更大/不同的视口(viewport)指定的。*

为什么？

如果改变视口(viewport)大小，这允许更平滑的过渡，例如从纵向到横向。

解决方案？

考虑到您提到的限制，我看不到仅使用 CSS 来执行此操作的简洁方法。你可以用 JS 做一些事情(但要确保它优雅地降级)，或者 PHP .

但是减少HTTP requests的最简单方法以及您的访问者必须下载多少包括执行以下一项或所有操作:

• 改用较少的字体或网络安全字体。
• 使用 CDN用于字体。
• 包括只有您需要的字符的“缩小”字体文件将它们用于。

查看 Google Web Fonts对于后两者。

如果您期望或获得对网站很重要的大量移动流量，则总是值得从移动优先的方法中重新考虑网站的设计和标记:什么是必要的，什么不是。 (这种方法通常有助于减少桌面版网站的困惑情况。)

---

^{* fiddling approach也可能对字体有用，但您必须自己进行浏览器测试，因为到目前为止还没有记录。}