【鸿蒙next开发】ArkUI框架：UI界面-@ohos.font (注册自定义字体)

最新推荐文章于 2025-05-09 17:40:23 发布
最新推荐文章于 2025-05-09 17:40:23 发布
阅读量629 收藏 9
点赞数 19
分类专栏： 鸿蒙5.0开发 ArkTS组件 ArkUI框架 文章标签： harmonyos 华为 android ArkUI 前端 ArkTS 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/147787796
版权

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

@ohos.font (注册自定义字体)

本模块提供注册自定义字体。

说明

本模块首批接口从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。

从API version 10开始，可以通过使用UIContext中的getFont方法获取当前UI上下文关联的Font对象。

导入模块

import { font } from '@kit.ArkUI'

font.registerFont

registerFont(options: FontOptions): void

在字体管理中注册自定义字体。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsFontOptions是注册的自定义字体信息。

FontOptions

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
familyNamestring | Resource10+是设置注册的字体名称。
familySrcstring | Resource10+是设置注册字体文件的路径。

示例：

说明

推荐通过使用UIContext中的getFont方法获取当前UI上下文关联的Font对象。

// xxx.ets
import { font } from '@kit.ArkUI';

@Entry
@Component
struct FontExample {
  @State message: string = 'Hello World';
  // iconFont示例，假设0000为指定icon的Unicode，实际需要开发者从注册的iconFont的ttf文件里面获取Unicode
  @State unicode: string = '\u0000';
  @State codePoint: string = String.fromCharCode(0x0000);

  aboutToAppear() {
    // familyName和familySrc都支持系统Resource
    font.registerFont({
      // 建议使用 this.getUIContext().getFont().registerFont()接口
      familyName: $r('app.string.font_name'),
      familySrc: $r('app.string.font_src')
    })

    // familySrc支持RawFile
    font.registerFont({
      familyName: 'mediumRawFile',
      familySrc: $rawfile('font/medium.ttf')
    })

    // 注册iconFont
    font.registerFont({
      familyName: 'iconFont',
      familySrc: '/font/iconFont.ttf'
    })

    // familyName和familySrc都支持string
    font.registerFont({
      familyName: 'medium',
      familySrc: '/font/medium.ttf' // font文件夹与pages目录同级
    })
  }

  build() {
    Column() {
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('medium') // medium：注册自定义字体的名字（$r('app.string.mediumFamilyName')、'mediumRawFile'等已注册字体也能正常使用）

      // 使用iconFont的两种方式
      Text(this.unicode)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('iconFont')
      Text(this.codePoint)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('iconFont')
    }.width('100%')
  }
}

说明

应用若需全局使用自定义字体，请在EntryAbility.ets文件的onWindowStageCreate生命周期中，通过windowStage.loadContent回调注册。

在HSP工程中，不推荐采用相对路径的方式注册自定义字体。

font.getSystemFontList10+

getSystemFontList(): Array<string>

获取风格字体列表。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
Array<string>系统的字体名列表。

说明

该接口仅在2in1设备上生效。

示例：

说明

推荐通过使用UIContext中的getFont方法获取当前UI上下文关联的Font对象。

// xxx.ets
import { font } from '@kit.ArkUI';

@Entry
@Component
struct FontExample {
  fontList: Array<string> = new Array<string>();

  build() {
    Column() {
      Button("getSystemFontList")
        .width('60%')
        .height('6%')
        .onClick(() => {
          this.fontList = font.getSystemFontList() // 建议使用 this.getUIContext().getFont().getSystemFontList()接口
        })
    }.width('100%')
  }
}

font.getFontByName10+

getFontByName(fontName: string): FontInfo

根据传入的系统字体名称获取系统字体的相关信息。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
fontNamestring是系统的字体名。

返回值：

类型说明
FontInfo字体的详细信息。

FontInfo10+

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
pathstring是系统字体的文件路径。
postScriptNamestring是系统字体的postScript名称。
fullNamestring是系统字体的名称。
familystring是系统字体的字体家族。
subfamilystring是系统字体的子字体家族。
weightnumber是系统字体的粗细程度，单位px。
widthnumber是系统字体的宽窄风格属性，单位px。
italicboolean是系统字体是否倾斜。
monoSpaceboolean是系统字体是否紧凑。
symbolicboolean是系统字体是否支持符号字体。

示例：

说明

推荐通过使用UIContext中的getFont方法获取当前UI上下文关联的Font对象。

// xxx.ets
import { font } from '@kit.ArkUI';

@Entry
@Component
struct FontExample {
  fontList: Array<string> = new Array<string>();
  fontInfo: font.FontInfo = font.getFontByName('');

  build() {
    Column() {
      Button("getFontByName")
        .onClick(() => {
          this.fontInfo =
            font.getFontByName('HarmonyOS Sans Italic') // 建议使用 this.getUIContext().getFont().getFontByName()接口
          console.log("getFontByName(): path = " + this.fontInfo.path)
          console.log("getFontByName(): postScriptName = " + this.fontInfo.postScriptName)
          console.log("getFontByName(): fullName = " + this.fontInfo.fullName)
          console.log("getFontByName(): Family = " + this.fontInfo.family)
          console.log("getFontByName(): Subfamily = " + this.fontInfo.subfamily)
          console.log("getFontByName(): weight = " + this.fontInfo.weight)
          console.log("getFontByName(): width = " + this.fontInfo.width)
          console.log("getFontByName(): italic = " + this.fontInfo.italic)
          console.log("getFontByName(): monoSpace = " + this.fontInfo.monoSpace)
          console.log("getFontByName(): symbolic = " + this.fontInfo.symbolic)
        })
    }.width('100%')
  }
}

font.getUIFontConfig11+

getUIFontConfig() : UIFontConfig

获取系统的UI字体配置。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
UIFontConfig系统的UI字体配置信息。

UIFontConfig11+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
fontDirArray<string>是系统字体文件所在的路径。
genericArray<UIFontGenericInfo>是系统所支持的通用字体集列表。
fallbackGroupsArray<UIFontFallbackGroupInfo>是备用字体集。

UIFontGenericInfo11+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
familystring是字体集名，字体文件中指定的"family"值。
aliasArray<UIFontAliasInfo>是别名列表。
adjustArray<UIFontAdjustInfo>是字体原本的weight值对应需显示的值。

UIFontFallbackGroupInfo11+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
fontSetNamestring是备用字体集所对应的字体集名称。
fallbackArray<UIFontFallbackInfo>是表示以下列表为该字体集的备用字体，如果fontSetName为""，表示可以作为所有字体集的备用字体。

UIFontAliasInfo11+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
namestring是别名名称。
weightnumber是当weight>0时表示此字体集只包含所指定weight的字体，当weight=0时，表示此字体集包含所有字体。

UIFontAdjustInfo11+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
weightnumber是字体原本的weight值。
tonumber是字体在应用中显示的weight值。

UIFontFallbackInfo11+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
languagestring是字体集所支持的语言类型，语言格式为bcp47。
familystring是字体集名，字体文件中指定的"family"值。

示例：

// xxx.ets
import { font } from '@kit.ArkUI';

@Entry
@Component
struct FontExample {
  build() {
    Column() {
      Button("getUIFontConfig")
        .width('60%')
        .height('6%')
        .margin(50)
        .onClick(() => {
          let fontConfig = font.getUIFontConfig();
          console.log("font-dir -----------" + String(fontConfig.fontDir.length));
          for (let i = 0; i < fontConfig.fontDir.length; i++) {
            console.log(fontConfig.fontDir[i]);
          }
          console.log("generic-------------" + String(fontConfig.generic.length));
          for (let i = 0; i < fontConfig.generic.length; i++) {
            console.log("family:" + fontConfig.generic[i].family);
            for (let j = 0; j < fontConfig.generic[i].alias.length; j++) {
              console.log(fontConfig.generic[i].alias[j].name + " " + fontConfig.generic[i].alias[j].weight);
            }
            for (let j = 0; j < fontConfig.generic[i].adjust.length; j++) {
              console.log(fontConfig.generic[i].adjust[j].weight + " " + fontConfig.generic[i].adjust[j].to);
            }
          }
          console.log("fallback------------" + String(fontConfig.fallbackGroups.length));
          for (let i = 0; i < fontConfig.fallbackGroups.length; i++) {
            console.log("fontSetName:" + fontConfig.fallbackGroups[i].fontSetName);
            for (let j = 0; j < fontConfig.fallbackGroups[i].fallback.length; j++) {
              console.log("language:" + fontConfig.fallbackGroups[i].fallback[j].language + " family:" +
              fontConfig.fallbackGroups[i].fallback[j].family);
            }
          }
        })
    }.width('100%')
  }
}

HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 14万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
002 学习鸿蒙应用开发ArkTs语言
热门推荐
龚礼鹏的博客
04-19 1万+
ArkTs是目前鸿蒙开发的主要语言，目前鸿蒙的主推模型Stage的新版本(3.1.0(API 9))开发不支持Java和JavaScript了，所以开发鸿蒙应用学习ArkTs是很有必要的。5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集。
鸿蒙NEXT开发：ArkUI框架UI界面-@ohos.font (注册自定义字体)
ZPYQAQ的博客
03-13 751
本模块提供注册自定义字体。
鸿蒙5.0版开发：ArkUI框架开发-stepper开发
m0_73088370的博客
11-13 329
当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。
HarmonyOs NEXT 鸿蒙 ArkUI 这篇就够了
制定持续可量化的目标，不断坚持。
07-03 2128
HarmonyOS NEXT ArkUI组件的使用 这篇就够了
鸿蒙UI（ArkUI-方舟UI框架）-开发布局
xianKOG的博客
01-17 1412
开发布局 1、布局概述 1）布局结构 2）布局元素组成 3）如何选择布局 声明式UI提供了以下10种常见布局，开发者可根据实际应用场景选择合适的布局进行页面开发。 布局 应用场景 线性布局（Row、Column） 如果布局内子元素超过1个时，且能够以某种方式线性排列时优先考虑此布局 层叠布局（Stack） 组件需要有堆叠效果时优先考虑此布局。层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理，则优先考虑在外层使用堆叠布局
鸿蒙5.0开发进阶：UI框架-ArkTS组件（Tabs）
Androidbye的博客
01-09 704
通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
鸿蒙NEXT开发-ArkUI
东林知识库
02-11 536
鸿蒙ArkUI的学习：包含ArkUI的基本介绍、常用组件的介绍和用法和登录小案例
ArkTS编写的HarmonyOS原生聊天UI框架
1
03-21 1415
ChatUI，是一个ArkTS编写的HarmonyOS原生聊天UI框架，提供了开箱即用的聊天对话组件。
鸿蒙5.0版开发：UI框架JS组件-基础组件（picker）
m0_69424697的博客
12-11 1095
滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。
【鸿蒙开发】HarmonyOS应用开发快速入门
科技改变人类，技术成就未来
06-10 863
本文通过构建一个简单的具有页面跳转/返回功能的应用（如下图所示），快速了解工程目录的主要文件，熟悉HarmonyOS应用开发流程。
如何使用ArkTS编写一个HarmonyOS原生聊天UI框架。
2401_82546228的博客
06-02 1477
深度定制聊天UI。替换输入区域为你自己的输入组件，替换头像，文本颜色等。
嵌入式openharmony标准鸿蒙系统驱动开发基本原理与流程
嵌入式技术开发
05-06 238
HDF（Hardware Driver Foundation）驱动框架，为驱动开发者提供驱动框架能力，包括驱动加载、驱动服务管理、驱动消息机制和配置管理。并以组件化驱动模型作为核心设计思路，让驱动开发和部署更加规范，旨在构建统一的驱动架构平台，为驱动开发者提供更精准、更高效的驱动管理的开发环境，力求做到一次开发，多系统部署。HCS（HDF Configuration Source）是HDF驱动框架的配置描述源码，内容以Key-Value为主要形式。它实现了配置代码与驱动代码解耦，便于开发者进行配置管理。
0基础学习鸿蒙开发-HarmonyOS4
u014142328的博客
05-06 871
0基础学习harmonOS4
鸿蒙NEXT开发动画案例5
鸿蒙布道师
05-09 831
鸿蒙NEXT开发动画案例5
【鸿蒙HarmonyOS】一文详解华为的服务卡片
weixin_67448099的博客
04-30 1677
Form Kit（卡片开发服务）提供一种界面展示形式，可以将应用的重要信息或操作前置到服务卡片（以下简称“卡片”），以达到服务直达、减少跳转层级的体验效果。卡片常用于嵌入到其他应用（当前被嵌入方即卡片使用方只支持系统应用，例如桌面）中作为其界面显示的一部分，并支持拉起页面、发送消息等基础的交互能力。
鸿蒙系统被抹黑的深层解析：技术、商业与地缘政治的复杂博弈-优雅草卓伊凡
一颗优雅草科技-央千澈的CSDN博客~只想无穷无尽的学习~作息早8-晚8
05-06 1222
鸿蒙遭遇的抹黑现象，本质上是中国高科技崛起过程中的必经考验。回顾历史，日本汽车产业在上世纪70年代进入美国市场时，同样经历了”质量低劣”的污名化阶段；韩国半导体产业在90年代发展初期，也被贴上”抄袭模仿”的标签。这些产业最终都通过持续的技术创新赢得了全球尊重。技术发展具有连续性：所有创新都站在巨人肩膀上商业成功需要时间：Android历经10年才超越Symbian生态系统建设非一日之功：需要产业链共同参与正如任正非所言：”我们要用优秀的产品说话，而不是用口水战回应质疑。
HarmonyOS开发-组件市场
最新发布
qq_36158551的博客
05-09 145
HarmonyOS NEXT开源组件市场是一个独立的插件，需通过DevEco Studio进行安装。用户可以从指定链接下载cases-master.zip文件，但直接安装会报错，需解压后找到plugin文件夹下的case_plugin-1.0.2-Alpha.zip进行安装。安装过程中需保持网络连接以下载依赖文件。安装成功后，用户可以在Index.ets界面右键导入HarmonyOS案例。具体安装和使用方法可参考相关说明文档。
鸿蒙电脑：五年铸剑开新篇，国产操作系统新引擎
hexi008的博客
05-09 507
好用方面，如上文所言，鸿蒙电脑的UI主界面简洁，有类似Windows的开始菜单，软件栏看着像macOS，一些设置界面则来自鸿蒙手机和平板，动效非常丝滑，操作逻辑更偏向Windows，容易被用户接受，上手难度低。上，网传鸿蒙电脑搭载了华为自研的麒麟X90处理器，基于5nm工艺，有24核心设计，其中有4个大核，8个中核，12个能效核，主频到4.2GHz。前不久，玺哥发布的《鸿蒙电脑，刺向垄断的利刃，将重塑全球PC市场格局》发布后，获得了读者朋友的积极反馈，不少都期望鸿蒙电脑早日发布。面对未来，我们有理由相信，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值