html 字体思源_CSS3嵌入字体@font-face调用字体（思源宋体regula/PingFang SC/ttf/woff）...

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

eot：该格式仅在老版本的IE中使用

ttf：(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行，已经变成最常用的一种字体文件表示方式，支持的浏览器很多。

svg：(Scalable Vector Graphics)该字体可能最早在IOS设备上被支持，没有ttf格式使用的广泛。

woff：(Web Open Font Format)是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由w3c标准化，以求成为web字体的统一标准。

如何使用自定义字体？

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

@font-face {

/* font-test*/

font-family: tonjay;

src:url('font/tonjay-web.woff'),

url('font/tonjay-web.ttf'),

url('font/tonjay-web.eot'); /* IE9 */

}

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

第二步，使用刚刚定义的字体，如下：div {

font-family: tonjay;

}

附@font-face的浏览器字体兼容性

Webkit/Safari(3.2+)：TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；

Opera (10+)： TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；

Internet Explorer：自ie4开始，支持EOT格式的字体文件；ie9支持WOFF；

Firefox(3.5+)： TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)

Google Chrome：TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。

另外一种方法：

1.下载SourceHanSansCN-Regular.TTF

2.解压得到左边文件

3.找到在线font-face生成器

根据提示上传 SourceHanSansCN-Regular.TTF

可以得到以下文件：

4.引入项目

在需要的地方引入 .css 文件；

html 字体思源_CSS3嵌入字体@font-face调用字体（思源宋体regula/PingFang SC/ttf/woff）...相关推荐

在网页中嵌入任意字体的解决方案（insert any font）
字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要 ...
如何应用font Awesome矢量字体图标介绍
最近做项目开发的时候,一开始做的时候,网页图标icon都是网上现找的,样式不统一先不说,统统都要引入就很麻烦了,要写各种图片路径,简直烦的不要不要的,后来不经意间接触到矢量图标这个东西,一下子来了兴趣 ...
命令行字体批处理工具——AFDKO（Adobe Font Development Kit for OpenType）
命令行字体批处理工具--AFDKO(Adobe Font Development Kit for OpenType) github链接:https://github.com/adobe-type-to ...
如何在网页中嵌入自己想要的字体(实例下载)
记得以前在国外那些人的网站看到那些字体怎么那么漂亮.而且不像电脑里面自带的字体.原来是通过这个方法来实现的.厉害,我觉得中文那些比较好看的字体,如果能都看到那该多好,不过看中文的TTF字体10M左右. ...
如何在网页中嵌入自己想要的字体(推荐阅读)
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
Mac中使用LaTeX的中文字体出现Package fontspec Error: The font “宋体“ cannot be found.解决方案
文章目录问题分析与解决小结参考问题最近写论文需要用到LaTeX,之前我已经介绍过Mac上安装Mac TeX的方法,用起来跟在Windows中没有区别,但是在使用中文字体的时候,还是会发生诸 ...
使用LaTeX的中文字体出现Package fontspec Error: The font “宋体“ cannot be found.解决方案
项目场景: 提示:这里简述项目相关背景: 关于Windows 10:使用LaTeX的中文字体出现Package fontspec Error: The font "宋体" cann ...
font awesome矢量字体使用
官网地址:Font Awesome 中文网 – | 字体图标设置字体图标大小 awesome 是一种字体,控制图标的大小,是通过 font-size 来实现的,before 字体大小 font-si ...
网页使用Font Awesome图标字体时，css定义 content 属性
网页使用Font Awesome图标字体时,css定义 content 属性必不可少,如下所示: .icon:before { content: '\f005'; font-famil ...
python使用matplotlib可视化、使用fontsize参数设置单个图像的字体的大小、使用rcParams.update参数全局设置字体的大小（font size）
python使用matplotlib可视化.使用fontsize参数设置单个图像的字体的大小.使用rcParams.update参数全局设置字体的大小(font size) 目录

html 字体思源_CSS3嵌入字体@font-face调用字体（思源宋体regula/PingFang SC/ttf/woff）...

html 字体思源_CSS3嵌入字体@font-face调用字体（思源宋体regula/PingFang SC/ttf/woff）...相关推荐

最新文章

热门文章