Vue项目中字体引入：完整实操指南

小蹦跶儿2025-12-19 9:54

前言：

在 Vue 项目开发过程中，常会遇到需引入特殊字体的场景（如 UI 设计稿指定的鸿蒙字体）。

若仅在代码中设置font-family而未完成字体文件的引入配置，页面端始终无法呈现设计预期的字体效果。

本文将以鸿蒙字体为例，详细介绍 Vue 项目中特殊字体的引入与使用方法。

一、背景介绍

近期我们的 UI 格外青睐鸿蒙字体，无论是 Web端 项目还是 H5 项目，设计的都是 鸿蒙字体 。

二、实现步骤

1、下载字体

先在官网上（华为开发者联盟）下载想要的字体：

下载解压之后选择自己需要的文件：

另：

虽然我用的是上面那个文件，不过大家也应该注意到了上面的网站有一句： "已归档不再维护 " 的提示，所以也可点击推荐用的HarmonyOS NEXT 版本。

同样可以 下载字体：

2、将下载好的字体文件放入项目中，同时创建`font.css`文件：

我这边是放在项目的src->assets文件夹下面，创建一个text文件，将所有的.ttf文件和font.less文件放到此文件中：

3、在`font.css`中配置字体，如果有多个字体，可多个引入，即写多个`@font-face`。就如同下面这样：

代码如下，可直接复制：

css 复制代码

@font-face {
  font-family: 'HarmonyOS_Sans_SC';
  src: url('./HarmonyOS_Sans_SC_Regular.ttf');
}

@font-face {
  font-family: 'HarmonyOS_Sans_SC_Bold';
  src: url('./HarmonyOS_Sans_SC_Bold.ttf');
}

@font-face {
  font-family: 'HarmonyOS_Sans_SC_Black';
  src: url('./HarmonyOS_Sans_SC_Black.ttf');
}

@font-face {
  font-family: 'HarmonyOS_Sans_SC_Light';
  src: url('./HarmonyOS_Sans_SC_Light.ttf');
}

@font-face {
  font-family: 'HarmonyOS_Sans_SC_Thin';
  src: url('./HarmonyOS_Sans_SC_Thin.ttf');
}

4、`main.js`文件中引入字体

代码如下：

js 复制代码

import '@/assets/text/font.less'

5、在需要使用该字体的地方直接应用即可：

下面是效果图：

三、总结

综上，Vue 项目引入鸿蒙字体等特殊字体的核心流程为文件准备 - 样式声明 - 全局引入 ：先将多格式字体文件放入项目静态资源目录，再通过@font-face规则定义字体属性，最后全局导入样式文件，并在组件中设置font-family即可生效。操作时需注意字体路径的准确性、多格式兼容适配，同时可通过压缩文件、按需加载等方式优化性能。该方法可直接迁移至各类特殊字体的引入场景，高效匹配 UI 设计需求。

以上，希望对你有帮助！