使用@font-face定义web字体

版权声明：本文为博主原创文章，未经博主允许不得转载。 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'
}