2段代码实现在所有浏览器下显示特殊字体(附字体转换工具)

网文分类: 

 

  1. @font-face {  
  2.     font-family: Cherl;  
  3.     src: url(ttf文件名称以及url地址);  
  4.     src: url(eot文件名称以及url地址)\9;  
  5.   }  

 

 

  1. 例:  
  2. @font-face {  
  3.     font-family: Cherl;  
  4.     src: url(../fonts/xjlFont.ttf);  
  5.     src: url(../fonts/xjlFont.eot)\9;  
  6.   }  

使用这段简短的代码就可以实现所有的浏览器兼容输出特殊字体了;

以下为ttf文件转换为eot文件的工具

 

经实际应用测试,如果字体包过大,或者是一些汉字字体包在转换的时候会出现eot文件为空的BUG,出现此BUG的童鞋看这里!

 

我们下载一个名为:ttf2eot的文件,官方下载地址

http://img.blog.csdn.net/20131108142411234?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHFkODkwNjA4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

我们选择红线标注的windows版本的压缩包下载下来

http://img.blog.csdn.net/20131108142530343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHFkODkwNjA4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

解压缩后我们会看到一个名为ttfeot.exe的可执行程序,双击打开它会看到如下图,不管它,直接关闭,进入下一步

http://img.blog.csdn.net/20131108142705296?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHFkODkwNjA4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

接下来的操作稍微有点复杂,需要用到字符操作命令,不懂操作命令的同学直接按照我的步骤来操作

 

.接下来我们点击开始->运行输入CMD进入字符命令操作界面,然后我们先把可执行文件拖进去,敲个空格,再把字体文件拖进去,再敲个空格,输入eot文件的输出路径就可以了,如下图:

http://img.blog.csdn.net/20131108144045828?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHFkODkwNjA4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

输出路径的盘符字母随便写,windows系统是不区分大小写的!上图中我输入的d:\FZ12.eot 意思是输出到d盘下生成一个名为FZ12.eot的文件,当然,名字可以随便起!

 

Tags: