版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/snow_cake/article/details/84317318
@font-face语法规则
@font-face {
font-family: <WebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
font-family | name | 必需的。定义字体的名称。 |
src | URL | 必需的。定义该字体下载的网址(S) |
font-style | normal italic oblique |
可选。定义该字体应该是怎样样式。默认值是"正常" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
可选。定义字体的粗细。默认值是"正常" |
浏览器的兼容性
不同的浏览器对字体格式支持是不一致的
Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则.
但是, Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.
注意: Internet Explorer 8 及更早IE版本不支持@font-face 规则.
也就是说使用@font-face我们至少需要.eot,.woff两种格式字体,如果需要支持更多浏览器版本还需要使用.svg等字体。
字体转换网址
http://www.font2web.com//?error=no_file_uploaded https://www.fontsquirrel.com/tools/webfont-generator
转换需要上传字体,转换完成后会自动下载安装包,解压安装包,将font文件夹下边.eot .woff .ttf .svg四个文件(这是我们自定义字体时需要的)引用到项目目录中,为更好的兼容性,我们采用以下代码:
@font-face {
font-family: 'PingFangSCRegular';
src: url('../../fonts/PingFang SC Regular_0.eot');
src: url('../../fonts/PingFang SC Regular_0.eot?#iefix') format('embedded-opentype'),
url('../../fonts/PingFang SC Regular_0.woff') format('woff'),
url('../../fonts/PingFang SC Regular_0.ttf') format('truetype'),
url('../../fonts/PingFang SC Regular_0.svg#PingFangSCRegular') format('svg');
font-weight: normal;
font-style: normal;
}
然后再用font-family引用字体就可以了
body{
font-family: 'PingFangSCRegular'
}