CSS中调用网络字体[转]

 字体使用是网页设计中不可或缺的一部分。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：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’);
} 

在页面中需要的地方使用该字体：
p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}
或者
<p style="font-family: fontNameRegular">掬水月在手，落花香满衣</p>

 

 

Google前些天在Google I/O大会上发布了一个新的服务 Font API，这是一个很酷的东东，可以让我们很方便的使用网络字体，而且这些字体都是免费的，你无需担心版权的问题。

      Google Font API使用起来也非常方便，从下面的例子中可见一斑：
@font-face { font-family: 'Tangerine'; font-style: normal; font-weight: normal; src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=_jMq7r9ahcBZZjpP8hftNA') format('truetype');}
嗯，看起来与普通的web-font定义并无二样，只是url资源使用Google Font API库中的字体。
 
      相对于其它的网络字体服务，Font API有以下优势(与Ajax API类似)：
 
      节省自己的流量； 快速，稳定。
 
      欲了解更多，可以查看这个快速指南。
 
——————————–分割线——————————–
 
中文网络字体
 
      使用网络字体的好处是不言而喻的，它可以让我们更方便的实现更丰富的页面效果。国外的技术人员，一直在不断的为让web-font变为现实而努力，从sIFR到typeface再到typeselect，以及cufon和fontue，不同的尝试和解决方案不断涌现，各大浏览器纷纷开始支持@web-font属性，同时类似typekit之类的收费和免费网络字体也开始不断出现。这让我们对此充满的希望。
 
      但是反观国内，我们却只能望洋兴叹，汉字的网络应用一直没有进展。
 
      其实道理很简单，中文网络字体的实现有很多难以跨越的瓶颈：
 
      字体太大，在当前国内的网络带宽环境下，使用中文网络字体不太现实； 版权问题，绝大部分优秀的中文字体，都不是免费的；商业模式陈旧，没有与时俱进。
 
      国内的商业字体厂商的思维还是停留在平面和印刷上，他们并没有重视或者发现网络这块市场，以至于多年来，除了开源的文泉驿，我们没有见到有太多字体创新，更没有看到各大字体厂商有向网络字体方面的任何努力。
 
      希望
 
      嗯，除了希望，我没有任何办法促进中文字体的网络应用......
 
      博大精深的中华文化，很大一部分是体现在汉字上的，而在互联网对社会生活影响越来越深刻的今天，汉字在网络上的应用却依然那么困难和苍白。
 
      Google之所以令人尊敬，不仅仅是因为它在创新，更是因为它也在普及创新。
 
      希望国内的字体厂商和浏览器厂商，能够真正的为中文字体的网络应用做出些努力和创新，不要固步自封，固守已经过时的商业模式。
 
      不过，或许他们也无能为力，或许我们只有等待——等待网速普及到100MB以上、等待国外出现先进的技术、等待....——到时候，或许字体厂商会沦为坚强的维权者....