鸡西网—微信标志
  • 鸡西网站制作
  • 鸡西网客服热线已更改为”400-0467-004“,请广大客户周知。
  • 鸡西网站设计为您提供免费技术问答.如有您有计算机的相关问题欢迎前来咨询!
  • 敢不敢在鸡西网High一下
  • 网站地图

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

Html&Css Danny.✔ 2299浏览 0评论 百度收否

鸡西网站设计在制作网页中,我们可以用CSS的font-family属性来定义字体,然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,所以用font-family属性就无法实现了,今天我们就介绍使用@font-face实现个性化字体。

CSS3 @font-face

说@font-face是CSS3的新特性并不准确,因为CSS2就已经支持了这一特性,并且Internet Explorer早在第5版的时候就已经支持它了,不过IE实现方式是通过自有的eot(Embeded Open Type)字体格式,其它浏览器都不支持这个格式。@font-face支持如下属性:

font-family:设置文本的字体名称。

font-style:设置文本样式。

font-variant:设置文本是否大小写。

font-weight:设置文本的粗细。

font-stretch:设置文本是否横向的拉伸变形。

font-size:设置文本字体大小。

src:设置自定义字体的相对路径或者绝对路径。

@font-face浏览器兼容性如下:

font-face实现个性化字体 4+ font-face实现个性化字体 3.5+ font-face实现个性化字体 4+ font-face实现个性化字体 3.1+ font-face实现个性化字体 10+

一个简单例子

先声明一个名为ChantelliAntiquaRegular的字体,有一种老的写法是这样的:

@font-face {
font-family: "ChantelliAntiquaRegular";
src: url("Chantelli_Antiqua-webfont.eot");
src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
font-weight: normal;
font-style: normal;
}

第一个src是兼容IE,第二个src是兼容其它浏览器。local(“☺”)是一种hack写法,避免从客户端加载字体,这种写法在Android系统中有BUG,感兴趣的同学可见《Best Practice For @Font-Face CSS Takes A Turn》,改进方案是声明两个@font-face,如下:

@font-face {
font-family: "ChantelliAntiquaRegular";
src: url("Chantelli_Antiqua-webfont.eot");
}

@font-face {
font-family: "ChantelliAntiquaRegular";
src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
font-weight: normal;
font-style: normal;
}

我们首先声明一个引用eot字体文件的@font-face,以确保它在IE中能正常工作,第二个@font-face引用了多个字体格式是为了兼容其它浏览器,它们将按顺序查找,直到找到支持的格式,这意味着同一个字体需要有多个格式。url(//:) format(“no404”)是一种Bulletproof写法,感兴趣的同学可见《New @Font-Face Syntax: Simpler, Easier》一文。

其它的HTML和CSS代码如下:

.font-face-display {
	font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
}

 

<div>Take me to your heart</div>

最重效果如下:

font-face实现个性化字体

想要丰富多彩的页面就需要有更多的字体样式,人们想出了很多字体替代方案,除了@font-face方案外还有sIFR、Cufon、Typeface.js等,还有.webfont,简单说,.webfont 就是在字体中嵌入了访问许可表,浏览器可以读出这些许可信息,并决定是否应该下载和渲染这些字体。另外还有Typekit也是一种值得关注的方案,将字体放在第三方服务器上供调用。这些方案的优缺点,鸡西网站设计将会在以后做详细的介绍。

转载请注明:七网科技 » CSS3 @font-face实现个性化字体

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址