vue 项目中引入字体文件的正确方式~

前言

在UI设计稿中，可能会有一些特殊字体，或者是一些字体图标。对于特殊字体，大多数用户本地电脑是没有安装该字体的字体包的。
为了能够让漂亮特殊的字体能展示在用户PC电脑上，我们通常需要把【字体包文件】植入项目中。它们通常是这样的格式文件：.otf | .woff | .ttf | 格式文件。

一、开发中需要什么样的字体

1. 字体图标

推荐一个比较大而全的字体图标库：阿里图标库
项目中，图标当字体用，通过设置font-size 设置大小

2. 特殊字体

基础UI设计，需要引入漂亮的字体提升用户体验，例如下面这样的：
UI设计师通常会提供这样的字体文件包

二、项目中引入字体文件

1. 字体文件

它们通常是这样的格式文件：.otf | .woff | .ttf | 格式文件。
将文件通常放到src/assets/font目录下：

2. css文件

新建一个font.scss（示例）：

@charset "UTF-8";
// 定义字体
@font-face {
    font-family: "DINAlternate-Bold";
    src: url('~@/assets/font/DINPro-Bold.otf');   // 注意这里的路径
    font-weight: normal;
    font-style: normal;
}

注意这里的字体文件src路径，路径错误会导致字体文件404

通常将该font.scss文件放到index.scss：

@import "../assets/font/font.scss";

全局index.scss文件配置：

  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/index.scss";`
      }
    }
  },

3. 项目使用该字体

<span class="font">测试字体</span>

.font {
    font-family: "DINAlternate-Bold";
}

总结

字体在UI前端开发中是常见需求，必备技能~~