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

时间:2015-03-04 20:01:08

标签: css responsive-design webfonts google-webfonts

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

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

但是我只想在屏幕宽度超过1024时使用这种字体。

如果屏幕宽度超过1024,可以只链接吗?

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

2 个答案:

答案 0 :(得分:4)

是的,您可以使用@import和媒体查询:

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

但请注意,无论如何都会下载该文件,区别在于它仅在媒体查询为真时才会应用(同样适用于<link> media属性。

答案 1 :(得分:4)

是:

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

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

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

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

但是,是否立即下载字体取决于浏览器的优化功能。 Chrome似乎至少有一半智能。其他浏览器可能做出类似的决定就个人而言,我不会费心去做很多脚本来防止下载字体CSS文件。他们不会导致这么多开销(除非你有很多字体,在不同的CSS文件中定义,但这也表明设计很差)。