使用CSS3 @font-face实现个性化字体

在网页中,我们可以用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>

运行结果:




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值