是否可以有条件地 link 一个 CSS 字体？

Question

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

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

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

如果屏幕宽度大于 1024，是否可以只 link 它？如何？

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

Answer 1

是的，您可以使用 @import 和媒体查询：

@import url('http://fonts.googleapis.com/css?Bangers') screen and (min-width: 1024px);

但注意文件无论如何都会被下载，不同的是只有当媒体查询为真时才会应用（同样适用于<link> media属性。

Answer 2

是：

<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 文件可能包含其他重要的样式当屏幕尺寸突然改变时（设备旋转、浏览器最大化 window 等）。对于字体来说，下载一秒钟通常不是问题，但元素、颜色、大小的可见性应该立即出现，所以这可能是下载 CSS 文件的一个很好的理由。

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

Is it possible to conditionally link a CSS font?