首页 > 代码库 > css网页使用自定义字体方法
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。
css网页使用自定义字体方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。