在vue2中引入外部的字体文件

作为一个卑微的切图仔，肯定要100%还原UI老师给的设计图纸，然而UI老师为了优美的界面，在各个位置恰到好处的使用的不同的字体。

这种情况在实际的开发中应该是很长见的。但是我们本地没有这个字体怎么办呢？用户本地也没有这个字体怎么办呢？

出现这个问题肯定不是用户的问题，那只能是我们解决这个问题。

我们一般会在项目中有一个文件夹专门用来存放字体文件，我是习惯于放到src/assets/fonts这个目录下。

我们将字体文件下载下来，然后放到fonts目录下，不管你是什么.ttf的文件还是.otf的文件，放进去就好了。

然后呢我们是需要一个css文件来引入这些字体的，当然你用less、scss也可以。

引入会涉及到路径这个问题，所以我就把css文件也放到fonts目录下。

/* font.css */
@font-face {
  /* font-family是我们给字体文件起的名字，以后使用这个字体就用这个名字 */
  font-family: "SourceHanSansCN-R";
  /* 对应的字体文件 */
  src: url('./SourceHanSansCN-Regular.otf');
  font-weight: normal;
  font-style: normal;
}

这样我们就定义好了一个字体，为了方便我们使用呢，我们会在main.js中将这个样式文件引入

// main.js
// 就只写这一行了，main.js该咋写咋写，把这个加进去就行
import './assets/fonts/font.css'

现在我们在开发组件的时候，就可以开心的使用定义好的字体了

/* 组件的样式文件 */

p{
    /* 这个名字不是字体文件的名字，而是我们定义好的字体名字哦 */
    font-family: 'SourceHanSansCN-R'
}

细心的小伙伴肯定有一个疑问，我的项目怎么可能就只引入一款字体呢，那如果引入很多种字体该怎么做呢？

答案很简单，在字体的样式文件中把用到的所有字体全部罗列出来就好了。

/* font.css */
@font-face {
  /* font-family是我们给字体文件起的名字，以后使用这个字体就用这个名字 */
  font-family: "SourceHanSansCN-R";
  /* 对应的字体文件 */
  src: url('./SourceHanSansCN-Regular.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SourceHanSansCN-L";
  src: url('./SourceHanSansCN-Light.otf');
  /* font-weight: normal; */
  /* font-style: normal; */
}

@font-face {
  font-family: "SourceHanSansCN-M";
  src: url('./SourceHanSansCN-Medium.otf');
  font-weight: normal;
  font-style: normal;
}

这样子我们就可以使用想要的字体进行开发了。

不过这还涉及到一个问题，字体文件都比较大，想我演示的这一整套思源黑体要40-50M，这也太大了，关于字体的文件压缩，目前尚未找到一个满意的方案。

像是字蛛这种都是需要你确定你用到哪些文字，他只把字体中你用到的文字保留下来实现的压缩，但是我们的文字可能都是动态获取的，确实满足不了需求。

如果找到了我会在后续更新中加入的。