html5 字体嵌入,网页中嵌入特殊字体（@font-face）

这里主要用到@font-face这个语法。

假如我要使用一个open-sans字体，点击ADD FONTS按钮，并勾选Agreement，如下图

打开转换字体的网站http://www.fontsquirrel.com/tools/webfont-generator

上传后，会自动生成所需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]

html5 字体嵌入,网页中嵌入特殊字体（@font-face）相关推荐

woff, 在网页中嵌入任意字体的解决方案
woff, 在网页中嵌入任意字体的解决方案 http://topic.csdn.net/u/20110705/10/98e79aba-1ddf-42fa-84a9-b79ec494cb69.html ...
如何在网页中嵌入自己想要的字体(实例下载)
记得以前在国外那些人的网站看到那些字体怎么那么漂亮.而且不像电脑里面自带的字体.原来是通过这个方法来实现的.厉害,我觉得中文那些比较好看的字体,如果能都看到那该多好,不过看中文的TTF字体10M左右. ...
在网页中嵌入任意字体的解决方案（insert any font）
字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要 ...
在网页中嵌入任意字体（特殊字体/自定义字体）的解决方案
在网页中嵌入任意字体(特殊字体/自定义字体)的解决方案参考文章: (1)在网页中嵌入任意字体(特殊字体/自定义字体)的解决方案 (2)https://www.cnblogs.com/yuwenson ...
在网页中嵌入任意字体的解决方案---google在线字体库应用
在网页中嵌入任意字体的解决方案---google在线字体库应用参考文章: (1)在网页中嵌入任意字体的解决方案---google在线字体库应用 (2)https://www.cnblogs.com/ ...
如何在网页中嵌入自己想要的字体(推荐阅读)
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
html5 在线字体库,网络字体@font-face，如何处理网页中的特殊字体？
网络字体@font-face 如何处理网页中的特殊字体 HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使 ...
网页中使用任意字体之实际操作
之前对"在网页中嵌入非系统自带字体"做过一点研究,虽然技术上能实现,但是对国内来说,没有太大的实际意义,因为一个中文体文件起码20M+,而且各个浏览器支持的字体文件还都不一样,也就 ...
在网页中嵌入百度地图的步骤
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特 ...

html5 字体嵌入,网页中嵌入特殊字体（@font-face）

html5 字体嵌入,网页中嵌入特殊字体（@font-face）相关推荐

最新文章

热门文章