css3如何预加载字体

html-css017

css3如何预加载字体,第1张

之前如果想在自己的网站使用某些好看的字体，总是迫不得已得在PS里先把字体图片做好。虽然这样做也能达到我们想要的效果，但是这样就增加了HTTP请求（如果在多处使用的话），即使合并所有图片，也不好管理，灵活性不高，哪一天想换种更好看的字体，那工作量，想想都没劲！幸好CSS3新增了@font-face模块，可以帮助我们轻松解决Web页面中使用优雅字体的方式，而且我们可以根据需要自定义多种字体，但是每个@font-face只能定义一种，若需要多个字体就启用多个@font-face规则。

@font-face 主要就是把自己想要的，或者自己定义的Web字体嵌入到Web页面中，然后这些字体就会被放置在服务器上，浏览器会根据指定的命令将对应的字体下载到本地缓存，使用它来修饰文本。也就是我们所说的Web字体嵌入。

@font-face 语法：

font-family : 其属性值指定的是自定义的字体名称，最好就是直接使用下载字体的默认文件名，然后需要将它引用到元素的font-family中。虽然自定义了自己想要的字体，但是也得在元素中使用它才有效果。【必选属性】

src : 其属性值指定自定义字体的存放路径，可以是相对路径或者绝对路径。format()指定的是自定义的字体格式，主要用来帮助浏览器识别，主要有：truetype，opentype，truetype-aat，svg，embedded-opentype等类型。【必选属性】

font-weight 和 font-style ：分别用来指定字体是否加粗和定义字体样式。当然还可以设置font-size等字体属性。【可选属性】

手机浏览器不同于PC端的浏览器的——它为阅读和流量而进化。

其实PC端的浏览器大部分已经直接CSS3和HTML5了——国内的大部分浏览器看到了IE内核的弊端，已经有不少改为了webkit内核——国外的浏览器除了IE（IE9需要补丁更新、IE10【稍】好），其他也有自己的私有属性来弥补。

说起来，大形势上就看，手机端的浏览器除了webkit还是webkit（android的chrome和IOS的Safari都是weibkit内核）。但实际情况是——国内大部分用户从以前的【按键手机】到【山寨手机】到【智能手机】一直对——UC浏览器——独有钟情。而作为一个开发者，偶是深受其害。

一些常规的CSS属性在它哪儿直接玩蛋去——它为阅读而生——他有夜间模式，他有无图模式，他有预加载缓存这种刷新无效模式——而WebApp的优势【易于开发的界面UI——被他的样式覆盖了】、【Retina视网膜图片——被他干掉了】、【html5的App Cache——被他预加载了】！——你的WebApp被**了！

OK，你会说——亲，你黑我啊？——猎豹浏览器——低下三个浮动的操作按钮，君不见手机APP不等于手机网页吗——其外观有的是还是仿IOS的经典设计模式【顶部标题状态，中间内容滚动，底部多个主导按钮】——好嘛，他全遮住了？

还有很多浏览器——总的来说，每一次的更新和优化总在告诉用户【更省流量、无图速度更快、更多手势操作（设计和设计的冲突也在于此）、各种推荐站点、各种美化皮肤、各种滑动弹跳】——但，手机浏览器的典范应该是chrome和Safari的，他应该可以自定义喜好内容、自动同步帐号记录、很好的创建桌面快捷方式图标（书签你会觉得更像书签，但很少有用户使用书签，反而是使用IOS的发送到桌面）。

总的来说，CSS大部分都支持的不错了——Android 3.0+（2.X系列需要添加-webkit-前缀）、IOS未研究，其他视各个浏览器的版本而定。

html5常用的就是一些属性和标签。手机端已经支持的不错了。

一些诸如【web storage】、【Application Cache】、【Web Workers】等有点乱。

具体的还是参考图表和动手测试。

http://www.idcos.net/ems/tech/design/rules/91341.html