css网络字体@font-face

红太狼 2020-06-22 16:27 784阅读 0赞

# **@font-face** #

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

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera

.EOT，适用于Internet Explorer 4.0+

.SVG，适用于Chrome、AndRoid、IPhone

.woff，适用于Chrome 6，Firefox3，ie9+，opare11。

woff是最新的web开放字体格式(web open font format)，w3c推荐，主要优势是针对浏览器进行优化，字体文件小。

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

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

例如：

@font-face {  
        font-family: 'fontNameRegular';  
        src: url('华康少女文字.eot');  
        src: local('华康少女文字 Regular'),  
        local('华康少女文字'),  
        url('华康少女文字.woff') format('woff'),  
        url('华康少女文字.ttf') format('truetype'),  
        url('华康少女文字.svg#华康少女文字') format('svg');  
    }  
    
    body{
    	background-color:#D2CDBE;
    	font-family: "华康少女文字","宋体",sans-serif;
    }