vue实现自定义字体库

    先看效果是不是你所需要的，再看具体如何实现。

     效果如下图所示：

    有些字体需要下载，用图片就会变得很不清楚，这样我们就需要去下载字体库，操作步骤如下：

1. 首先找到需要下载的字体库


2. 然后放在项目里面


3. 然后定义字体库名


4. 最后引用字体库名

     第一步：通过第一字体库链接下载字体库，https://www.diyiziti.com/，找到自己对应的自己库

 直接点击下载即可

第二步：在src/assets/下面，创建font文件夹，将下载好的字体放进去

 创建font.css，定义字体名字，并添加字体路径

@font-face {
font-family: '青春字体';
src: url('./青春字体.ttf');
}

第三步：在需要使用字体库的时候，引用字体库css，并且在当前class类中使用字体名，注意要一致，不然不起效果

 代码如下：

路径 src/assets/font.css


需要使用字体vue页面代码：

 所有的代码如下：

@font-face {
font-family: '青春字体';
src: url('./青春字体.ttf');
}

vue逆袭群，希望能够帮助到大家！

群号：659182980