我可以为移动设备设置CSS字体加载可选吗？

Question

3

我目前的网站设计是基于Bootstrap响应式框架构建的。它使用了几种自定义字体，占据了文档大小的50％左右。这些字体是通过CSS包含的，包含方式无法更改。

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

是否有一种CSS方法，例如 @media (min-width: 480px)，可以在响应式布局中不加载字体？

- KTB

1

当然，“移动设备”可能使用高带宽的WiFi，而17英寸的笔记本电脑则可能使用依附的移动连接。很难检测到用户使用的网络连接类型。 - Paul D. Waite

3个回答

1

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

- Charles

我也建议这样做（但浏览器嗅探可能不准确），但似乎问题特别涉及CSS方法。 - Baumr

1

如果在您的媒体查询中引用了背景图像，则并非所有背景图像都会预先下载 -

也许这种技术对字体也适用。但如果你使用需要 JS（如 Typekit、Google）的任何东西，你的字体将因为 JS 而被请求，据我所知。

- Stuart Robson

这篇文章里有一些关于预取和下载的非常有用的内容。http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/ - justinavery

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Baumr · Accepted Answer

在大多数实现中，被CSS媒体查询引用的背景图像被预先下载。（除非你对display:none;进行一些调整，但这并不支持所有浏览器。）

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

为什么？

如果视口大小发生变化，例如从纵向到横向，则可以实现更平滑的过渡。

解决方案？

考虑到您提到的限制，我认为只使用CSS没有干净的方法来实现这一点。您可以使用JS做一些事情（但一定要确保它可以平稳降级），或者PHP。

但是，减少HTTP请求和访客需要下载的内容的最简单方法包括执行以下操作之一或全部操作：

查看Google Web Fonts获取后两个建议。

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

^{* 小把戏方法对于字体也可能很有用，但是你需要自己进行浏览器测试，因为目前还没有文档记录。}