频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
CSS @font-face(CSS 自定义字体)
2013-12-16 11:53:47      个评论    来源:dojo中国专栏  
收藏   我要投稿

email : gm4linus at gmail dot com

@font-face可以实现从服务器端加载字体,所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意,早在2001年时就被提出来,只不过近两年才被各浏览器广泛支持。而且各浏览器支持的字体文件格式也可能不同,一般来说如下四种格式可覆盖所有浏览器。


eot:该格式仅在老版本的IE中使用,浏览器兼容性查看https://caniuse.sinaapp.com/html/item/eot/index.html

ttf:(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行,已经变成最常用的一种字体文件表示方式,支持的浏览器很多。浏览器兼容性查看https://caniuse.sinaapp.com/html/item/ttf/index.html

svg:(Scalable Vector Graphics)该字体可能最早在IOS设备上被支持,没有ttf格式使用的广泛。浏览器兼容性查看https://caniuse.sinaapp.com/html/item/svg-fonts/index.html

woff:(Web Open Font Format)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由W3C标准化,以求成为web字体的统一标准。浏览器兼容性查看https://caniuse.sinaapp.com/html/item/woff/index.html


如何定义字体不在本文的介绍范围内,可以用一些软件来生成字体文件和各格式之间转换。定制字体需要有非常好的设计基础。


如何使用自定义字体?

第一步,在CSS中引入字体并给名字取一个合适的名字,如下

@font-face {
    /* font-properties */
    font-family: pictos;
    src:url('pictos/pictos-web.woff'),  
	url('pictos/pictos-web.ttf'),
	url('pictos/pictos-web.eot'); /* IE9 */
}

font-family定义字体的名字,接下来的src是加载字体文件的位置,之所有有多个url就是因为浏览器兼容问题。

第二步,使用刚刚定义的字体,如下

p {
    font-family: pictos;
}


具体例子请查看https://caniuse.sinaapp.com/html/demos/fontface/index.html.

@font-face的浏览器兼容性请查看https://caniuse.sinaapp.com/html/item/fontface/index.html


点击复制链接 与好友分享!回本站首页
相关TAG标签 字体
上一篇:CSS3 animation(CSS3 帧动画)
下一篇:CSS样式学习笔记『W3School』
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站