css网页使用自定义字体方法

@font-face可以加载服务器端的字体到浏览器端，这样设计师就可以不受客户端字体库的限制。

一般来说有四种格式的字体文件即可覆盖所有浏览器。这四种格式为：

.EOT：适用于Internet Explorer 4.0+。

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

.SVG：适用于Chrome、IPhone。

.WOFF：转为web字体指定的字体格式标准，被新版本浏览器广泛支持。

语法+举例：在css中如下写

@font-face {  
    font-family: 'afish'; 
    src: url('../fonts/afish-webfont.eot'); 
    src: url('../fonts/afish-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/afish-webfont.woff') format('woff'), 
    url('../fonts/afish-webfont.ttf') format('truetype'), 
    url('../fonts/afish-webfont.svg#afish') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

在这里采用的是相对路径，当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到实际页面中去：

有了上的字体定义即可使用afish字体了。如下：

body{
    font-family: afish;
    width: 100%;
    height: 100%;
    color: red;
}

 

获取@font-face所需字体格式：
特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，同样需要第三方工具或者软件来实现，下面我给大家推荐一个工具Font Squirrel。