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

我在一个响应迅速的网站上使用谷歌字体，比如：

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

但是，我只想在屏幕宽度大于1024时使用这种字体

如果屏幕宽度超过1024，是否可以链接它？如何链接

更新：我可以使用e@media查询来防止字体显示。我希望移动设备不必下载字体文件。

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

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

但请注意，无论如何都会下载该文件，不同之处在于仅当媒体查询为true时才会应用该文件（这同样适用于

媒体
属性。
是：

<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文件中定义，但这也表明设计不佳）。
这会阻止字体显示，但我希望做的是不要为不使用该文件的设备下载该文件。我在我的（Chrome，desktop）中使用在浏览器中，它仍然下载CSS文件，但它没有下载它所指的字体。实际的字体在不同的文件中。只有当我将最小宽度从5000px减少到500px时，它才真正下载字体。正如你所说的，字体仍然在下载。我希望找到一种方法，使移动设备不需要字体来避免关机正在加载。恐怕到时候您需要JS来完成