网页中嵌入特殊字体(@font-face)

2015-01-08阅读(8719)评论(0)牵着狗狗看MM

苏州实时公交查询

这里主要用到@font-face这个语法。
假如我要使用一个open-sans字体,点击ADD FONTS按钮,并勾选Agreement,如下图
打开转换字体的网站http://www.fontsquirrel.com/tools/webfont-generator
font-face
上传后,会自动生成所需eot,svg,ttf,woff,woff2 5种文件,
并且还有个CSS文件,直接包含调用以上5种文件,很方便

[css]
@font-face {
font-family: ‘open_sansregular’;
src: url(‘opensans-regular-webfont.eot’);
src: url(‘opensans-regular-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘opensans-regular-webfont.woff2’) format(‘woff2’),
url(‘opensans-regular-webfont.woff’) format(‘woff’),
url(‘opensans-regular-webfont.ttf’) format(‘truetype’),
url(‘opensans-regular-webfont.svg#open_sansregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

[/css]

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 网页中嵌入特殊字体(@font-face)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏