当前位置:七道奇文章资讯设计学堂DW设计
日期:2012-08-14 22:18:00  来源:本站整理

CSS3教程:利用@font-face实现本性化字体[DW设计]

赞助商链接



  本文“CSS3教程:利用@font-face实现本性化字体[DW设计]”是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:

 在网页中,我们可以用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浏览器兼容性以下:

4+  3.5+  4+  3.1+  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 class="font-face-display">Take me to your heart</div>

最重效果以下:

 

免费字体网站Font Squirrel
Font Squirrel是一个非常优异的免费字体资源网站,汇集了很多高品质字体供网页计划者免费下载,还有个字体魄局生成工具@font-face generator,上传一个字体文件,可以生成多种字体魄局及CSS代码,非常有效.假如你需求一些优异的免费英文字体,这是个好去处.

  

想要丰富多彩的页面就需求有更多的字体款式,人们想出了很多字体替换筹划,除了@font-face筹划外还有sIFR、Cufon、Typeface.js等,还有.webfont,简单说,.webfont 就是在字体中嵌入了拜候答应表,浏览器可以读出这些答应托息,并决意能否应当下载和渲染这些字体.别的还有Typekit也是一种值得关注的筹划,将字体放在第三方服务器上供调用.这些筹划的优缺陷,将会在今后做具体的介绍.

  以上是“CSS3教程:利用@font-face实现本性化字体[DW设计]”的内容,如果你对以上该文章内容感兴趣,你可以看看七道奇为您推荐以下文章:
  • CSS3教程:利用@font-face实现本性化字体
  • 本文地址: 与您的QQ/BBS好友分享!
    • 好的评价 如果您觉得此文章好,就请您
        100%(1)
    • 差的评价 如果您觉得此文章差,就请您
        0%(0)

    文章评论评论内容只代表网友观点,与本站立场无关!

       评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
    Copyright © 2020-2022 www.xiamiku.com. All Rights Reserved .