1、下载字体
此处下载的字体为HarmonyOS_Sans_SC_Medium

2、将下载好的字体放到项目的assets下，同时新建font.css文件
在这里插入图片描述
3、font.css中配置字体
在这里插入图片描述

//多个字体可多个引入
@font-face {
  font-family: 'HarmonyOS_Sans_SC_Medium';
  src: url('../fonts/HarmonyOS_Sans_SC_Medium.ttf');
  font-weight: normal;
  font-style: normal;
}

4、main.js中引入字体

import './assets/css/font.css'

5、在需要改变字体的地方使用

<div class='test'>字体测试代码</div>
<style scoped>
    .test {
        font-family: 'HYXinHaiXingKaiW';
    }
</style>
# vue.js # css # javascript
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

【新手教程】HarmonyOS组件模板通关攻略（通过DevEco Studio插件快速集成模板&组件）

点击顶部菜单栏中的“File（文件）”> “New...（新建）”> “Create Project from Template Market（从模板市场创建项目）”，进入模板市场界面；找到目标组件后，点击组件详情页卡片中的“Integrate source code”（集成源码）或“Integrate SDK”（集成SDK）按钮，即可将组件添加到您的项目中。启动 IDE，点击顶部菜单栏中的“Fi

avatar HarmonyOS开发者社区

【推荐+1】HarmonyOS官方模板优秀案例（第9期：工具行业 · 综合工具）

|- date_calculate/src/main/ets// 日期计算(har)||- exchange_calculator/src/main/ets// 汇率计算器(har)||- remote_control/src/main/ets// 空调遥控器(har)

avatar HarmonyOS开发者社区

“新”意十足 · HarmonyOS模板&组件（本次上新：日程+工具+课堂模板、支付+登录等组件）

该组件聚合了多方的支付能力，开发者无需分别适配各家支付 SDK，即可快速集成支付功能，以最简化的方式完成端侧支付体验搭建，本模板为教育类应用提供了常用功能的开发样例，对视频播放器进行了定制化的开发，主要分首页、学习、我的三大模块。该组件提供华为账号一键登录及其他方式登录（微信、手机号登录），开发者可以根据业务需要快速实现应用登录，本模板为日程类应用提供了常用功能的开发样例，主要分首页、日历、我的三

avatar HarmonyOS开发者社区