css - 是否可以有条件地链接 CSS 字体？

Question

我在响应式网站中使用 Google 字体，例如:

<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>

但是我只想在屏幕宽度大于 1024 时使用此字体。

是否可以仅在屏幕宽度大于 1024 时才链接它，如何链接？

更新:我可以使用@media 查询来阻止显示字体。我想要的是移动设备不必下载字体文件。

Answer 1

是的:

<link href='http://fonts.googleapis.com/css?Bangers' 
      rel='stylesheet' 
      media='screen and (min-width: 1024px)'
      type='text/css'>

您也可以在 CSS 中使用媒体查询。这样你就不需要为不同的屏幕尺寸准备多个样式表。下载大小会更大(下载整个文件)，但可以节省请求数量，因此通常效率更高。

我使用 this fiddle 对此进行了测试.在我的(Chrome，桌面)浏览器中，它仍然会下载 CSS 文件，但不会下载它引用的字体。实际字体在单独的文件中。只有当我将最小宽度从 5000px 减小到 500px 时，它才会实际下载字体。

从技术上讲，它不需要下载 CSS 文件，但也许它想要以防万一，毕竟 CSS 文件可能包含其他样式，当屏幕尺寸突然改变时(设备旋转) ，浏览器窗口的最大化等)。对于字体来说，下载一秒钟通常不是问题，但元素、颜色、大小的可见性应该立即出现，所以这可能是下载 CSS 文件的一个很好的理由。

不过，是否立即下载字体取决于浏览器的优化功能。 Chrome 似乎至少是半聪明的。其他浏览器可能会做出类似的决定。就我个人而言，我不会费心编写大量脚本来防止字体 CSS 文件被下载。它们不会造成太多开销(除非您有许多字体，在不同的 CSS 文件中定义，但这也表明设计不佳)。