css3的@font-face

本文是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创建此格式字体

 

• .tff格式

TureTpe字体是Windows和Mac的常见字体，是一种RAW格式

IE9+ |  Chrome4+  | iOS Mobile Safari4.2+

 

• .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+

下载免费的字体：

• http://www.fonts.com/web-fonts
• http://www.google.com/webfonts

司徒博文中推荐的工具：

Font Squirrel

还有一个不错的在线字体转换工具：

http://icomoon.io/app/

扩展阅读：

http://www.cnblogs.com/rubylouvre/archive/2011/06/19/2084875.html

http://www.zhangxinxu.com/css3/css3-web-fonts.php

http://www.php100.com/manual/css3_0/@font-face.shtml#syntax