我在响应式网站中使用Google字体,如:
<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
但是我只想在屏幕宽度超过1024时使用这种字体。
如果屏幕宽度超过1024,可以只链接吗?
更新:我可以使用@media查询来防止显示字体。我想要的是移动设备不必下载字体文件。
答案 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文件中定义,但这也表明设计很差)。