在网页中，我们可以用CSS的font-family属性来定义字体，然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体，而这些字体通常在用户的电脑中是没有安装的，所以用font-family属性就无法实现了，今天我们就介绍使用@font-face实现个性化字体。
语法：
@font-face ：{属性: 取值;}
取值：
-
font-family：
- 设置文本的字体名称。 font-style：
- 设置文本样式。 font-variant：
- 设置文本是否大小写。 font-weight：
- 设置文本的粗细。 font-stretch：
- 设置文本是否横向的拉伸变形。 font-size：
- 设置文本字体大小。 src：
- 设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。
说明：
@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type)格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】
说@font-face是CSS3的新特性并不准确，因为CSS2就已经支持了这一特性，并且InternetExplorer早在第5版的时候就已经支持它了，不过IE实现方式是通过自有的eot(Embeded OpenType)字体格式，其它浏览器都不支持这个格式。
代码与实例
<style>
@font-face{
font-family:"STXINGKA";
src:url("font/STXINGKA.TTF");
}
#div2{
font-size:20px;
font-family:"STXINGKA";
}
</style>
</head>
<body>
<div>这是测试内容，It is very well!</div>
<div id="div2">这是测试内容，It is very well!</div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
