HarmonyOS开发实战:小分享-自定义字体加载——rawfile 字体资源
2026/7/23 19:55:03 网站建设 项目流程

前言

自定义字体可以让 App 的视觉风格更加独特。小分享 App 的线装本预览风格适合使用古风字体。HarmonyOS 通过FontRegistry注册自定义字体,字体文件存放在rawfile目录下。本篇讲解自定义字体的加载和应用。详细 API 可参考 HarmonyOS Font 官方文档。

一、字体文件存放

字体文件放在entry/src/main/resources/rawfile/fonts/目录下:

entry/src/main/resources/ rawfile/ fonts/ SourceHanSerifCN-Regular.ttf # 思源宋体 LXGWWenKai-Regular.ttf # 霞鹜文楷 ZhiMangXing-Regular.ttf # 仓耳今楷

二、FontRegistry 注册字体

import { font } from '@ohos.font'; import { BusinessError } from '@ohos.base'; async function registerFonts(context: Context): Promise<void> { try { await font.registerFont({ familyName: 'SourceHanSerif', familySrc: '/fonts/SourceHanSerifCN-Regular.ttf' }); await font.registerFont({ familyName: 'LXGWWenKai', familySrc: '/fonts/LXGWWenKai-Regular.ttf' }); console.info('Fonts registered successfully'); } catch (err) { console.error('Font registration failed: ' + JSON.stringify(err)); } }

三、在 PreviewPage 中应用字体

3.1 在 aboutToAppear 中注册

@Entry @Component struct PreviewPage { async aboutToAppear(): Promise<void> { await registerFonts(this.context); } build() { Column() { Text('小分享') .fontSize(28) .fontWeight(FontWeight.Bold) .fontColor('#1A1A1A') .fontFamily('SourceHanSerif') // 应用自定义字体 Text('生活的美好在于分享') .fontSize(16) .fontColor('#666666') .fontFamily('LXGWWenKai') // 应用自定义字体 } } }

四、字体使用场景

字体文件名适用场景
思源宋体SourceHanSerifCN-Regular.ttf标题、正文
霞鹜文楷LXGWWenKai-Regular.ttf副标题、引文
仓耳今楷ZhiMangXing-Regular.ttf装饰文字

五、字体加载注意事项

5.1 字体文件大小

字体文件通常较大(2-10MB),建议:

  1. 只加载需要的字体文件
  2. 使用字体子集化工具减小体积
  3. 在 aboutToAppear 中异步加载

5.2 字体文件格式

HarmonyOS 支持的字体格式:

格式支持
TTF
OTF
WOFF
WOFF2

六、本文核心知识点

6.1 自定义字体核心要点

  1. 字体文件放在 rawfile/fonts 目录
  2. font.registerFont 注册字体
  3. fontFamily 属性应用字体

6.2 实战开发要点

  • 字体提前注册,在 aboutToAppear 中加载
  • 字体文件注意体积
  • 只支持 TTF/OTF 格式

附录:自定义字体加载的完整实现细节

1. FontRegistry 完整 API

API作用说明
font.registerFont(options)注册字体传入 familyName 和 familySrc
familyName字体名称在 fontFamily 中引用
familySrc字体文件路径rawfile 路径

2. 完整的字体注册流程

import { font } from '@ohos.font'; import { BusinessError } from '@ohos.base'; async function registerFonts(context: Context): Promise<void> { try { await font.registerFont({ familyName: 'SourceHanSerif', familySrc: '/fonts/SourceHanSerifCN-Regular.ttf' }); await font.registerFont({ familyName: 'LXGWWenKai', familySrc: '/fonts/LXGWWenKai-Regular.ttf' }); console.info('Fonts registered successfully'); } catch (err) { console.error('Font registration failed: ' + JSON.stringify(err)); } }

3. 字体文件存放位置

entry/src/main/resources/ rawfile/ fonts/ SourceHanSerifCN-Regular.ttf # 思源宋体 LXGWWenKai-Regular.ttf # 霞鹜文楷 ZhiMangXing-Regular.ttf # 仓耳今楷

4. 在 PreviewPage 中应用字体

@Entry @Component struct PreviewPage { async aboutToAppear(): Promise<void> { await registerFonts(this.context); } build() { Column() { Text('小分享') .fontSize(28) .fontWeight(FontWeight.Bold) .fontColor('#1A1A1A') .fontFamily('SourceHanSerif') // 应用自定义字体 } } }

5. 字体使用场景

字体文件名适用场景
思源宋体SourceHanSerifCN-Regular.ttf标题、正文
霞鹜文楷LXGWWenKai-Regular.ttf副标题、引文
仓耳今楷ZhiMangXing-Regular.ttf装饰文字

6. 完整代码文件索引

文件路径说明
pages/PreviewPage.ets应用自定义字体
common/utils/FontUtils.ets字体注册工具类
resources/rawfile/fonts/字体文件存放目录

7. 实现要点总结

自定义字体核心要点:

  1. font.registerFont()注册字体
  2. fontFamily属性应用字体
  3. rawfile 目录存放字体文件
  4. aboutToAppear中注册字体
  5. TTF/OTF 格式支持

8. 总结

本文详细讲解了 HarmonyOS 自定义字体加载的完整实现,涵盖 FontRegistry API、字体注册、字体应用等核心知识点。

完整代码索引

文件路径说明
本文涉及的代码文件见正文

核心 API 参考

API/组件用途文档链接
文中涉及的 API核心功能华为官方文档

常见问题

Q1: 为什么会出现编译错误?A: 检查 import 路径是否正确,确认 API 版本兼容性。

Q2: 如何调试功能?A: 使用 hilog 打印日志,检查参数传递是否正确。

Q3: 运行时崩溃怎么办?A: 使用 try/catch 捕获异常,检查权限配置。

性能优化建议

  1. 异步操作使用 async/await 避免阻塞 UI
  2. 大量数据使用 LazyForEach 懒加载
  3. 图片资源压缩后再使用
  4. 缓存网络请求结果
  5. 及时释放不再使用的资源

安全注意事项

  1. 用户输入必须校验
  2. 敏感数据不要硬编码
  3. 网络请求使用 HTTPS
  4. 文件路径避免注入
  5. 权限最小化原则

扩展阅读

  • HarmonyOS 官方文档提供了更详细的 API 说明
  • 开源鸿蒙社区有丰富的示例代码
  • 华为开发者论坛可以获取技术支持

总结

本文详细讲解了小分享 App 中对应功能的完整实现,涵盖 API 使用、代码示例、常见问题、性能优化等核心知识点。通过本文的学习,读者可以掌握 HarmonyOS 开发的完整流程。

本章小结

本文详细介绍了小分享 App 中对应功能的完整实现方案。通过本文的学习,读者可以掌握以下核心知识点:

  1. 功能的核心 API 使用方法和注意事项
  2. 完整的代码实现流程和最佳实践
  3. 常见问题的排查和解决方案
  4. 性能优化和安全建议

掌握这些知识后,读者可以独立实现类似功能,并应用到自己的 HarmonyOS 应用开发中。

练习与思考

  1. 尝试修改代码中的参数,观察对功能的影响
  2. 思考如何将本功能与其他功能组合使用
  3. 考虑如何优化代码性能和用户体验
  4. 探索华为官方文档中更多高级用法

实践是掌握技术的最佳途径,建议读者在理解代码后自行编写和调试。

本文总结

本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习,读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。在实际开发中,建议读者结合官方文档深入理解每个 API 的参数含义和适用场景,并在项目中灵活运用。

技术能力的提升来自于持续的实践和总结,希望读者在阅读本文后能够动手实践,将知识转化为技能。

  • 图片裁剪与旋转

  • 文件读写操作


字体加载最佳实践

  1. 字体文件体积:字体文件通常较大(2-10MB),建议只加载需要的字体文件
  2. 异步加载:在 aboutToAppear 中异步加载字体,避免阻塞 UI
  3. 字体子集化:使用字体子集化工具减小体积,只包含需要的字符
  4. 缓存策略:字体注册后全局可用,无需重复注册
  5. 回退字体:使用系统字体作为回退,避免自定义字体加载失败时无字体可用

支持的字体格式

格式支持说明
TTFTrueType 字体
OTFOpenType 字体
WOFFWeb 字体格式
WOFF2Web 字体格式

字体文件管理

resources/rawfile/fonts/ ├── SourceHanSerifCN-Regular.ttf # 思源宋体 - 5.2MB ├── LXGWWenKai-Regular.ttf # 霞鹜文楷 - 3.8MB └── ZhiMangXing-Regular.ttf # 仓耳今楷 - 4.1MB

字体应用示例

Text('标题文字') .fontSize(24) .fontWeight(FontWeight.Bold) .fontFamily('SourceHanSerif') // 应用思源宋体 Text('正文内容') .fontSize(16) .fontFamily('LXGWWenKai') // 应用霞鹜文楷

总结

本文详细讲解了 HarmonyOS 自定义字体加载的完整实现,涵盖 FontRegistry API、字体注册、字体应用、字体文件管理等核心知识点。

总结

本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习,读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践,并能够独立实现类似功能。在实际开发中,建议读者结合官方文档深入理解每个 API 的参数含义和适用场景,并在项目中灵活运用。

如果这篇文章对你有帮助,欢迎点赞👍、收藏⭐、关注🔔,你的支持是我持续创作的动力!

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询