服务端字体

服务端字体

为什么要用服务器字体

在css3之前，页面文字所使用的字体必须已经在客户端中被安装才能正常显示，但是如果这个字体在客户端中没有安装的话，使用这个字体就不能正常显示了。

为了解决这个问题，在css3中，新增了web fonts功能，网页中可以使用web服务器端的字体，只要某个字体在web服务器端安装了，这个字体就能正常显示了。

怎么使用服务器字体

定义服务器端字体的语法

@font-face {
	font-family: 'diyfont'; // 自定义字体名称
	src: url('diyfont.eot'); /* IE9+src:url('路径') 设置字体路径 */   
	src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('diyfont.woff') format('woff'), /* chrome、firefox */
		 url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		 url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
// 使用服务器端字体
body{
    font-family:diyfont;
}


.box{
	font-family:'diyfont'
}

兼容当前的主流浏览器服务器字体四大格式

TureType (.ttf)
Web Open Font Format (.woff)
Embedded Open Type (.eot)
SVG (.svg)

字体图标iconfont

是什么

Iconfont 就是指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法

哪些网站在用它

淘宝：

新浪微博用到的地方：

优点

• 加载文件体积小
• 可以直接通过css的font-size，color修改它的大小和颜色
• 矢量图，放大缩小不失真。
• 兼容低版本浏览器（ie4）

缺点

• 矢量图只能是纯色的。
• 制作门槛高，耗时长，维护成本也很高

使用Iconfont

• 设计师设计矢量图片然后通过工具直接转换成相应的字体
• 使用第三方Iconfont 在线服务（例如： 阿里巴巴Iconfont平台 ），然后直接上传你自己设计的图标矢量图生成字体文件