在网页中自定义字体

　　最近切图遇到了，psd文档与网页字体的冲突。很多字体，系统中都没有安装。在同事和网络的帮助下解决了这个问题...发此文以表感谢，外加自我提醒。

　　一、使用Google WebFont字体，网上资料很多，，在这里就不仔细描述了。

　　二、如果Goole字体中没有，请看下面的方法

 

　　大体步骤：

      1、下载所需字体。字体下载站提供的字体一般为.TTF格式。

      2、字体转格式。为了确保在主流浏览器中都能正常显示该字体，需要提供3种字体格式。我们可以拿下载下来的.TTF文件去转换得到另外两种格式的字体。字体文件格式的转换可以通过网站FontsQuirrel

            或 onlinefontconverter提供的在线字体转换服务获取。
           .TTF或.OTF 适用于Firefox 3.5、Safari、Opera
          .EOT 适用于Internet Explorer 4.0+
          .SVG 适用于Chrome、IPhone
       3、使用@font-face定义字体。在这里推荐一个好的在线字体转化网站onlinefontconverter

       4、在html里面调用CSS。

 

@font-face{ 
font-family:'TrajanPro-Regular';
src: url('webfont/TrajanPro-Regular.eot'); /* IE9*/
src:url('webfont/TrajanPro-Regular.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
    
    url('webfont/TrajanPro-Regular.woff') format('woff'),/* chrome、firefox */
    url('webfont/TrajanPro-Regular.ttf') format('truetype'),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont/TrajanPro-Regular.svg#svgFontName') format('svg'); /*  iOS 4.1- */

}

 

使用后的效果图如下：

 

  

　　　　

完整实例下载