我目前的网站设计是基于Bootstrap响应式框架构建的。它使用了几种自定义字体,占据了文档大小的50%左右。这些字体是通过CSS包含的,包含方式无法更改。
我现在的目标是阻止移动设备请求这些字体,以减少其带宽消耗。
是否有一种CSS方法,例如 @media (min-width: 480px)
,可以在响应式布局中不加载字体?
我目前的网站设计是基于Bootstrap响应式框架构建的。它使用了几种自定义字体,占据了文档大小的50%左右。这些字体是通过CSS包含的,包含方式无法更改。
我现在的目标是阻止移动设备请求这些字体,以减少其带宽消耗。
是否有一种CSS方法,例如 @media (min-width: 480px)
,可以在响应式布局中不加载字体?
display:none;
进行一些调整,但这并不支持所有浏览器。)查看Google Web Fonts获取后两个建议。
* 小把戏方法 对于字体也可能很有用,但是你需要自己进行浏览器测试,因为目前还没有文档记录。
get_browser
函数:http://php.net/manual/en/function.get-browser.php
如果在您的媒体查询中引用了背景图像,则并非所有背景图像都会预先下载 -
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
也许这种技术对字体也适用。但如果你使用需要 JS(如 Typekit、Google)的任何东西,你的字体将因为 JS 而被请求,据我所知。