CSS3 @font-face使用详解，字体引入

CSS3 @font-face使用，如何引入项目

@font-face是CSS3中的一个模块，可以把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，在Web的开发中使用字体不怕只能使用Web安全字体。

字体下载地址

http://www.dafont.com

http://www.google.com/webfonts

@font-face 兼容性

1. Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
2. Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

@font-face的语法规则

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

说明：

1. YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:“YourWebFontName”;”
2. source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
3. format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4. weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

举个例子

1. 先下载好字体
2. 将字体文件解压放在项目目录中
3. 在css中使用 @font-face 直接使用，如下：

 @font-face {
      font-family: 'SingleMaltaRegular';
      src: url('../fonts/singlemalta-webfont.eot');
      src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/singlemalta-webfont.woff') format('woff'),
	   url('../fonts/singlemalta-webfont.ttf') format('truetype'),
	   url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');
      font-weight: normal;
      font-style: normal;
   }

下图是 vue + webpack 项目中引入字体截图

图1：把下载的字体包 fonts文件夹 放在 assets 文件夹下；创建 fonts.css 文件，使用 @font-face 引入字体，如图左边即可；

图2：把 fonts.css 文件引入项目中；可在 app.vue 中引入，或者 main.js 中引入， 或者根据需要，在项目某个文件中引入；

注意：有些字体的格式未在 webpack.base.config.js 规则中定义，需要配置，如下图：

如有疑问，可在下方评论区留言！

提供两个参考网址：
https://www.cnblogs.com/fjdingsd/p/5663561.html
https://segmentfault.com/a/1190000017397287