是否可以有条件地链接 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 中使用媒体查询。这样您就不需要针对不同的屏幕尺寸使用多个样式表。下载大小会更大（下载整个文件），但会节省请求数量，因此通常效率更高。

我用这个小提琴测试了这一点。在我的（Chrome、桌面）浏览器中，它仍然会下载 CSS 文件，但不会下载它引用的字体。实际的字体位于单独的文件中。只有当我将最小宽度从 5000px 减少到 500px 时，它才会真正下载字体。

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

不过，是否立即下载字体取决于浏览器的优化功能。Chrome 看起来至少有一半智能。其他浏览器可能会做出类似的决定。就我个人而言，我不会费心编写大量脚本来阻止下载字体 CSS 文件。它们不会造成那么多开销（除非您有很多字体，在不同的 CSS 文件中定义，但这也表明设计很差）。