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。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。