鸿蒙5.0开发进阶：JS服务卡片UI组件通用信息-自定义字体样式

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

自定义字体样式

font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源，然后在font-family样式中引用该字体。

自定义字体可以是从项目中的字体文件或网络字体文件中加载的字体。

说明

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

字体格式支持ttf和otf。

定义font-face

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

font-family： 自定义字体的名称。

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

• 项目中的字体文件：通过url指定项目中的字体文件路径(只支持绝对路径，详见文件组织)。

• 网络字体文件：通过url指定网络字体的地址。

• 不支持设置多个src。

使用font-face

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

• 页面布局

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

• 页面样式

  @font-face {
    font-family: HWfont;
    src: url("/common/HWfont.ttf");
  }
  .demo-text {
    font-family: HWfont;
  }