本文是css3的@font-face的探究:
1、语法:
@font-face:{属性:取值}
取值:
- font-family 设置文本的字体名称
- font-style 设置文本样式
- font-variant 设置文本是否大小写
- font-weight 设置文本的粗细
- font-stretch 设置文本是否横向的拉伸变形
- font-size 设置文本字体大小
- src 设置自定义字体的相对路径或者绝对路径
说明:
可以加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
2、兼容性:
- .eot格式
Embedded Open Type,IE专用字体,可以用TrueType创建此格式字体
![](http://dl.iteye.com/upload/attachment/0076/5462/9a03a742-c4a0-3f9c-b021-fc0da213788d.jpg)
- .tff格式
TureTpe字体是Windows和Mac的常见字体,是一种RAW格式
IE9+ | Chrome4+ | iOS Mobile Safari4.2+
![](http://dl.iteye.com/upload/attachment/0076/5460/ba4066a2-bfec-33a3-bdcd-b5c5452254b5.jpg)
- .otf格式
OpenType被认为一种原始的字体格式,支持:
FF3.5+ | Chrome4.0+ | Safari3.1+ | Opera10.0+ | iOS MObile Safari 4.2+
- .svg格式
基于SVG字体渲染的一种格式,支持的浏览器:
Chrome4+ | Safari3.1+ | Opera10.0+ | iOS MObile Safari 3.2+
下载免费的字体:
司徒博文中推荐的工具:
还有一个不错的在线字体转换工具:
扩展阅读: