输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS 5.0.0(12)

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
API参考
高级筛选
元服务API集不筛选
您当前浏览的HarmonyOS 5.0.0(API 12)文档归档不再维护，推荐您使用最新版本。详细请参考文档维护策略变更。
API参考应用框架ArkUI（方舟UI框架）JS组件兼容JS的类Web开发范式（ArkUI.Full）组件通用信息自定义字体样式

自定义字体样式

更新时间: 2025-03-17 00:08
本文导读

自定义字体可以是从项目中的字体文件中加载的字体，字体格式支持ttf和otf。

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

定义font-face

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

font-family：

自定义字体的名称。

src：

自定义字体的来源，支持如下类别：

  • 项目中的字体文件：通过url指定项目中的字体文件路径(只支持绝对路径，详见资源和文件访问规则章节)。

  • 不支持设置多个src。

使用font-face

可以在style中定义font-face，然后在font-family样式中指定该font-face的名称，从而应用font-face定义的字体。

示例：

页面布局：

<!-- xxx.hml -->
<div>    
  <text class="demo-text">测试自定义字体</text>  
</div>

页面样式：

/*xxx.css*/
@font-face {
  font-family: font;
  src: url("/common/font.ttf");
}
.demo-text {
  font-family: font;
}
媒体查询
原子布局
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词