CSS3.0新属性之@font-face在网页中嵌入字体

摘要

@font-face允许作者指定网上的字体来显示他们的网页上的文字。@font-face通过在页面中嵌入新字体,从而不需要在依靠用户计算机上安装的数量有限的字体。

语法:

@font-face {
  font-family: ;
  src:  [,]*;
  [font-weight: ];
  [font-style: 


  This is Bitstream Vera Serif Bold.


在这个例子中,调用用户的本地的“Helvetica Neue Blod”,如果用户没有安装该字体(两个不同的名字都试过了),然后调用远程的“MgOpenModernaBold.ttf”来用来代替:

@font-face {  
  font-family: MyHelvetica;  
  src: local("Helvetica Neue Bold"),  
  local("HelveticaNeue-Bold"),  
  url(MgOpenModernaBold.ttf);  
  font-weight: bold;  
}

浏览器支持

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.5 (1.9.1) 4.0 4.0 10.0 3.1
WOFF 3.5 (1.9.1) 6.0 9.0 Nightly build Nightly build
SVG Font -- yes -- yes yes

几种字体格式:
.TTF或.OTF,适用于Firefox 3.5、Safari、Opera 、Chrome
.EOT,适用于Internet Explorer 4.0+
.SVG,适用于Chrome、Safari、Opera
.WOFF 适用于Firefox 3.5(1.9.1) Chrome6.0 Internet Explorer9.0 //网页字体格式

下面要解决的是如何获取到某种字体的这三种格式文件。一般地,我们在手头上(或在设计资源站点已经找到)有该字体的某种格式文件,最常见的是.TTF文件,我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或onlinefontconverter提供的在线字体转换服务获取。这里推荐第一个站点,它允许我们选择需要的字符生成字体文件(在服务的最后一个选项),这样就大大缩减了字体文件的大小,使得本方案更具实用性。

兼容所有浏览器的写法:

@font-face { 
font-family: 'fontName'; 
src: url('fontName.eot'); /*IE*/
src: local('fontName Regular'), 
local('fontName'), 
url('fontName.woff') format('woff'), 
url('fontName.ttf') format('truetype'), 
url('fontName.svg#fontName') format('svg'); 
} 
/*其中fontName替换为你的字体名称*/ 

用法:

h1{font-family: fontName} 

说明:远程字体需要缓存到本地才能显示,对于一个中文字体就十几M来说意义不大。就看woff字体能否解决这一问题。

发表评论

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