CSS3在线中文参考指南 - @font-face » 张鑫旭-鑫空间-鑫生活

CSS3 @font-face使用参考指南

浏览：19835次

语法：

@font-face ：{属性: 取值;}

取值：

font-family：: 设置文本的字体名称。
font-style：: 设置文本样式。
font-variant：: 设置文本是否大小写。
font-weight：: 设置文本的粗细。
font-stretch：: 设置文本是否横向的拉伸变形。
font-size：: 设置文本字体大小。
src：: 设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。

说明：

@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】

兼容性：

.eot格式

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(√)IE6	(×)Firefox 2.0	(×)Chrome 1.0.x	(×)Opera 9.63	(×)Safari 3.1
	(√)IE7	(×)Firefox 3.0	(×)Chrome 2.0.x		(×)Safari 4
	(√)IE8

.ttf格式

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(×)Chrome 1.0.x	(×)Opera 9.63	(√)Safari 3.2.1
	(×)IE7	(×)Firefox 3.0	(×)Chrome 2.0.x	(√)Opera 10	(√)Safari 4
	(×)IE8	(√)Firefox 3.5

代码与实例

CSS代码：

@font-face{
 font-family:Flower;
 src:url(../image/flowers.eot);
}
@font-face{
 font-family:Kaps;
 src:url(../image/kaps_bold.eot);
}
@font-face{
 font-family:Kom;
 src:url(../image/kom.eot);
}
.font_1{font-size:30px; font-family:"Flower";}
.font_2{font-size:30px; font-family:"Kaps";}
.font_3{font-size:30px; font-family:"Kom";}

HTML代码：

<div class="font_1">hi, look at me!</div>
<div class="font_2">hi, look at me!</div>
<div class="font_3">hi, look at me!</div>

效果截图

查看demo原页面>>

拓展知识点（由各前端同仁提供）

尚未添加拓展知识点！我来添加++

图片地址是：取消

插入：

我要分享

分享到：1