携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

一、前言

我们在开发项目的时候，有时候会遇到项目中有些内容要求用其他特殊字体来进行展现，针对 vue 项目，我想简单分享一下 vue 中如何引入字体，具体步骤如下。

二、实现

1.下载字体库

随便找几个免费开源的字体网站，找到符合条件的字体库，下载下来。例如我下载的是这个网站的华文行楷字体。

2.项目中放入字体文件

将下载好的字体文件放入我们的 vue 项目中某个路径下，我这里是放在 src/assets/font 下：

3.创建 font.css 文件

在 src/styles 路径下创建 font.css 文件，并设置 font-family 属性作为引用字体时的别名，设置 src 属性为字体在项目中的存放路径，代码如下：

@font-face {
    font-family: 'define-font2';
    src: url('../assets/font/华文行楷字体.ttf');
}

除此以外，还可以设置 font-weight、font-style 等属性，如果是需要引入多个字体，那就写多个 @font-face 就可以了，代码如下：

@font-face {
    font-family: 'define-font';
    src: url('../assets/font/Lucida Calligraphy.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'define-font2';
    src: url('../assets/font/华文行楷字体.ttf');
}

5.全局引入

在 main.js 文件中将 font.css 文件进行全局引入，方便在其他组件中进行调用。代码如下：

import '@/styles/font.css'// 字体库

6.使用字体

将需要改变字体的标签的样式中的 font-family 属性设置的跟 font.css 文件中的 font-family 属性一致即可，代码如下：

<template>
  <div class="app-container">
    <div class="tip_message">他山之石，可以攻玉。</div>
  </div>
</template>

<style lang="scss">
.tip_message{
  font-family: 'define-font','define-font2';
  font-size: 25px;
  text-align: center;
}
</style>

如果是需要设置多组字体就用逗号隔开。效果如下：

vue中字体库引入教程