@font-face的使用

详情请看什么是@font-face,以及在css当中如何使用
新增计算机自身米有的字体,为程序员打开一种全新的世界——可以任意使用你自己喜欢的字体啦!!!
本人推荐国内阿里的字体图标库
http://www.iconfont.cn/

使用举例:

@font-face{
    font-family: 'turn-arrow';
    src: url('../fonts/icons/turn-arrow.eot') format('embedded-opentype'), url('../fonts/icons/turn-arrow.woff') format('woff'), url('../fonts/icons/turn-arrow.ttf') format('truetype'), url('../fonts/icons/turn-arrow.svg') format('svg');
}
.is-center::after{
    font-family: 'turn-arrow';
    content:'\e600';
    color: #ffffff;
    line-height: 30px;
}

兼容性

并非所有的浏览器都支持@ font-face的!

目前,@ font-face的支持

Firefox
Opera
Chrome
Safari
Internet Explorer 9
这是你会说他不支持IE9以下的浏览器吗,不用担心,在旧的浏览器使用@ font-face时,不同的浏览器支持特定的字体文件。

IE浏览器:EOT
Mozilla浏览器:OTF,TTF
Safari浏览器:OTF,TTF​​,SVG,truetype
歌剧:OTF,TTF​​,SVG
Chrome浏览器:TTF,SVG,woff,truetype
FireFox:woff,true,type

猜你喜欢

转载自blog.csdn.net/ty13438189519/article/details/52344655