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

Question

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

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

有没有一种 CSS 方式，比如@media (min-width: 480px)不加载响应式布局中的字体？

Answer 1

在大多数实现中，CSS 媒体查询中引用的背景图像会被预先下载。（除非您对. 的使用做了一些摆弄display:none;，但并非所有浏览器都支持。）

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

为什么？

如果视口大小发生变化，例如从纵向到横向，这允许更平滑的过渡。

解决方案？

考虑到您提到的限制，我没有看到仅使用 CSS 来做到这一点的干净方法。你可以用 JS 做一些事情（但要确保它优雅地降级），或者PHP。

但减少HTTP 请求和访问者必须下载多少的最简单方法包括执行以下一项或全部操作：

• 改用较少的字体或网络安全字体。
• 为字体使用CDN。
• 包括“缩小”字体文件，这些文件只包含您将使用它们的字符。

查看后两者的Google Web Fonts。

如果您期望或获得大量对网站很重要的移动流量，那么从移动优先的方法重新考虑网站的设计和标记总是值得的：什么是必要的，什么不是。（这种方法通常甚至可以帮助减少您网站桌面版本的混乱。）

---

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

Answer 2

您可以创建两个不同的样式表，一个用于移动设备，一个用于桌面设备，然后使用 PHP 浏览器检测或其他各种方法来查看用户是在移动设备上还是桌面设备上，并为他们提供相应的样式表。

看一下PHPget_browser函数： http: //php.net/manual/en/function.get-browser.php

Answer 3

如果您的媒体查询中引用了所有背景图像，则不一定要预先下载 -

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

也许这种技术也适用于字体。如果您正在使用任何需要 JS 的东西（例如 typekit、google），则不会因为 JS 无论如何 afaik 而请求您的字体。