web font是一种网络字体,是CSS的模块,利用CSS的@font-face属性可以在网页中嵌入任意字体。
对于网站制作者&前端老湿们来说,为了确保显示效果,长期以来不得不一直使用“安全字体”,英文网站一律是 Verdana,中文网站一律是宋体——因为这是每台浏览网页的电脑里肯定装有的字体。
这是设计理念不断进步的UI老师们所不能容忍的。字体可是页面效果的根本,好比T台模特的衣服换了千万种,但你只能用这一两个模特(对于中文用户那就几乎只有一个宋体)?如何才能在网页上应用丰富的字体效果?
特殊字体应用方案
目前方案无非三种:
- 客户打开网页的时候,提示客户安装该字体。
- 制作图片嵌入网页。
- 把字体嵌入到网页中(通过上传字体文件到指定目录,让CSS引用显示)。
第一种方案明显存在弊端,用脚本程序去识别客户端是否含有该字体,加重程序的负载量。而且严重影响用户的体验。效果最次!
第二种方案生成图片,网页加载慢,不利于百度收录,效果差!
第三种方案流量小加载速度快,效果最好!
第三种方案就是指网络字体(web font,也被称为“网页内嵌字体”或“网页外调字体”),通过上传字体文件到指定目录,然后在CSS中用规定格式进行引用就可以使字体效果跃上你的页面了,使网页用字不再受浏览客户端的影响。
网络字体与浏览器支持
网络字体是靠CSS中的@font-face语句来实现的,通常认为网络字体是CSS3中的一个模块,其实早在CSS2中就已经有了,连老古董IE6甚至IE4都支持。其他和种浏览器包括手机浏览器也都完美支持(如IE、360、搜狗、火狐、chrome、safari、Opera等)。