如何在VUE项目中添加新字体？

大家都知道，在CSS中字体的使用顺序是按照样式中所写的字体先后顺序加载的，也就是说明，最后一个加载的样式才是最后展示出来的效果。如果在没有特别定义的情况下，往往会采用默认的字体，宋体 OR 微软雅黑。那么，怎么才能在网页中添加各种漂亮的字体呢？今天就来做一个字体添加的记录吧。

字体的格式问题

首先拿到的字体是otf格式的

我发现它在VSCode里面都打不开，更别说使用了。经过了一番百度查找，我才明白，原来ttf格式才是现在比较流行的趋势啊。啥也别说了，格式转换一下就成了呗。搜索一下有很多在线转换字体格式的工具啊，开熏(^▽^) 但是啊，居然一个都不成功？Excuse me ？开玩笑么这不是。

好吧，线上不成我们还有线下。首先我们下载一个软件，FontCreator 6，网上搜索一下很快的下载好了。至于中文版还是英文版，这个纯属看个人运气了。

下载的压缩包：

FontCreator软件启动页面：

菜单“文件——打开——字体文件”：

啥也不用干，直接另存为

转码成功，yes~

万里长城第一步，完成了，接下来就是要将字体引入到项目文件中去。

首先我们新建文件夹font，和CSS和images平级即可。

然后将刚才转码好的文件添加到font文件夹中去。再新建一个font.css文件。

打开font.css

添加如下代码，首先重命名字体名字，添加字体路径引入，定义粗细等。

@font-face {
  font-family: 'DIN'; /* 重命名字体 */
  src: url('./DIN-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

然后配置配置webpack.base.conf.js 文件

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}

最后在入口文件中引入字体即可在项目中开开心心的使用漂亮字体啦~

import "../../assets/font/font.css"

功成身退，溜了溜了。