字体使用是网页设计中不可或缺的一部分。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：1. 不可能大范围的使用该字体；2. 图片内容相对使用文字不易修改；3. 不利于网站SEO（主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素）。网络上有一些使用sIFR技术、或javascript/flash hack的方法，但实现起来或繁琐，或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。 

第一步 

获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。 

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

第二步 

获取到三种格式的字体文件后，下一步要在样式表中声明该字体，并在需要的地方使用该字体。 

字体声明如下： 

复制代码

代码如下:


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


在页面中需要的地方使用该字体： 

p { font: 13px fontNameRegular, Arial, sans-serif; } 
h1{font-family: fontNameRegular} 

或者 

掬水月在手，落花香满衣

 

css嵌入任意字体  

2010-10-25 00:55:01|  分类： 原创技术文章 |  标签：css  字体  网页  |举报|字号 订阅

在好多项目中，都需要用到一些特殊的字体，但这些字体不是每个人都有的。当某个用户的系统字体库中没有你预先设置的字体，这将使你的网页效果大大折扣。切图是解决办法之一，当遇到如下图所示的情况的时候，显然切图并不是最佳方案。

 

我们再来看看谷姐的网页，他们的导航就采用了切图的方法，而他的背景是一张大图片，当网速较慢的时候，就会出现如下的画面，这让人觉得很不和谐。

鉴于此，css嵌入任意字体在某些情况便可以发挥它的优点了。

 

下面我说一下如何实现的：

1.准备好你的字体，建议最好是.ttf，因为.ttf可以被高版本的chrome和ff3.0+直接调用，（暂时没有找到资料说可以在css直接调用.fon）。

 

2.准备转换.ttf到.eot的软件，我暂时找到两种：Microsoft Weft和ttf2eot（一个命令行程序）。据我的使用经验，Microsoft Weft是图形化软件，但如果转换压缩中文字库会失败（其实不是报错，只是转不了），所以如果要转换中文字体的就要用ttf2eot了。ttf2eot的使用方法非常简单：将字体文件和本程序放在同一目录，然后在cmd运行TTF2EOT <***.ttf> ***.eot就可以了。

 

3.把这两个文件都复制到你的项目文件夹中，在css文件中输入如下代码，就可以在目前所有主流上显示你的字体了：

 

@font-face{font-family:'yahei';src:url(../p_w_picpaths/msyh.ttf); font-style:normal; font-weight:normal}

@font-face{font-family:'yahei';src:url(../p_w_picpaths/msyh.eot);}
*{margin:0;font-family:'yahei';}

 

代码解释：font-family：字体的名称，src：路径，font-style和font-weight可以不写，这根据你的需要；第一行是针对ff、chrome、opera、Safari浏览器的，第二行就是针对ie的。经我测试，如果第一行和第二行在同一个css文件下，ff会失效，所以应该新建一个css文件，把第二行写入，然后用导入，就可以解决这个问题。

 

就这样，任务完成！

 

不过，Every coin has two sides，我总结了一下css嵌入任意字体的优缺点：

 

优点：对于英文网站来说，这是个很好的方法，因为英语只有26个字母，所以字库文件再大也是有限的，所以如果你的项目是英文网站，或者做个英文的logo或者导航的话，这是个很好的方法，因为没有了图片，可以大大增加你的浏览速度。

 

缺点，如果是做中文网站的话，就不建议了，因为中文字库很大，10m-20m+很正常(不过也有小的)，这对于用户体验非常不利；当然你也可以弄一个制作ttf文件的软件(Font Creator Program)回来，这样就可以修改字体库的大小。不过，如果只是涉及到少量中文字体的话，这也是个不错的方法之一，毕竟没有了图片。