css3个性化字体_动力节点Java学院整理

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

CSS3 @font-face

[email protected],因为CSS2就已经支持了这一特性,并且Internet Explorer早在第5版的时候就已经支持它了,不过IE实现方式是通过自有的eot(Embeded Open Type)字体格式,[email protected]性:

  font-family:设置文本的字体名称。
  font-style:设置文本样式。
  font-variant:设置文本是否大小写。
  font-weight:设置文本的粗细。
  font-stretch:设置文本是否横向的拉伸变形。
  font-size:设置文本字体大小。
  src:设置自定义字体的相对路径或者绝对路径。
[email protected]

一个简单例子

先声明一个名为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,[email protected],如下:

  @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;  }  

[email protected],以确保它在IE中能正常工作,[email protected]浏览器,它们将按顺序查找,直到找到支持的格式,这意味着同一个字体需要有多个格式。url(//:) format("no404")是一种Bulletproof写法。

其它的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是一个非常优秀的免费字体资源网站,收集了很多高品质字体供网页设计者免费下载,[email protected] generator,上传一个字体文件,可以生成多种字体格式及CSS代码,非常有用。如果你需要一些优秀的免费英文字体,这是个好去处。

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

css3个性化字体_动力节点Java学院整理

郑重声明:本网站发布的内容(图片、视频和文字)以及用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注