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

2022-11-23 0 60

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

 

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

如何使用CSS3 @font-face 实现个性化字体。 4+ 如何使用CSS3 @font-face 实现个性化字体。 3.5+ 如何使用CSS3 @font-face 实现个性化字体。 4+ 如何使用CSS3 @font-face 实现个性化字体。 3.1+ 如何使用CSS3 @font-face 实现个性化字体。 10+

一个简单例子

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

?

1 2 3 4 5 6 7 @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,如下:

?

1 2 3 4 5 6 7 8 9 10 11 @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代码如下:

?

1 2 3 4 5 .font-face-display {      font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif; }   < div class = "font-face-display" >Take me to your heartdiv>

  最重效果如下:

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

免费字体网站Font Squirrel

  Font Squirrel是一个非常优秀的免费字体资源网站,收集了很多高品质字体供网页设计者免费下载,还有个字体格式生成工具@font-face generator,上传一个字体文件,可以生成多种字体格式及CSS代码,非常有用。如果你需要一些优秀的免费英文字体,这是个好去处。

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

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

 

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论