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。