前言
自定义字体可以让 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),建议:
- 只加载需要的字体文件
- 使用字体子集化工具减小体积
- 在 aboutToAppear 中异步加载
5.2 字体文件格式
HarmonyOS 支持的字体格式:
| 格式 | 支持 |
|---|---|
| TTF | ✅ |
| OTF | ✅ |
| WOFF | ❌ |
| WOFF2 | ❌ |
六、本文核心知识点
6.1 自定义字体核心要点
- 字体文件放在 rawfile/fonts 目录
- font.registerFont 注册字体
- 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. 实现要点总结
自定义字体核心要点:
- font.registerFont()注册字体
- fontFamily属性应用字体
- rawfile 目录存放字体文件
- aboutToAppear中注册字体
- TTF/OTF 格式支持
8. 总结
本文详细讲解了 HarmonyOS 自定义字体加载的完整实现,涵盖 FontRegistry API、字体注册、字体应用等核心知识点。
完整代码索引
| 文件路径 | 说明 |
|---|---|
| 本文涉及的代码文件 | 见正文 |
核心 API 参考
| API/组件 | 用途 | 文档链接 |
|---|---|---|
| 文中涉及的 API | 核心功能 | 华为官方文档 |
常见问题
Q1: 为什么会出现编译错误?A: 检查 import 路径是否正确,确认 API 版本兼容性。
Q2: 如何调试功能?A: 使用 hilog 打印日志,检查参数传递是否正确。
Q3: 运行时崩溃怎么办?A: 使用 try/catch 捕获异常,检查权限配置。
性能优化建议
- 异步操作使用 async/await 避免阻塞 UI
- 大量数据使用 LazyForEach 懒加载
- 图片资源压缩后再使用
- 缓存网络请求结果
- 及时释放不再使用的资源
安全注意事项
- 用户输入必须校验
- 敏感数据不要硬编码
- 网络请求使用 HTTPS
- 文件路径避免注入
- 权限最小化原则
扩展阅读
- HarmonyOS 官方文档提供了更详细的 API 说明
- 开源鸿蒙社区有丰富的示例代码
- 华为开发者论坛可以获取技术支持
总结
本文详细讲解了小分享 App 中对应功能的完整实现,涵盖 API 使用、代码示例、常见问题、性能优化等核心知识点。通过本文的学习,读者可以掌握 HarmonyOS 开发的完整流程。
本章小结
本文详细介绍了小分享 App 中对应功能的完整实现方案。通过本文的学习,读者可以掌握以下核心知识点:
- 功能的核心 API 使用方法和注意事项
- 完整的代码实现流程和最佳实践
- 常见问题的排查和解决方案
- 性能优化和安全建议
掌握这些知识后,读者可以独立实现类似功能,并应用到自己的 HarmonyOS 应用开发中。
练习与思考
- 尝试修改代码中的参数,观察对功能的影响
- 思考如何将本功能与其他功能组合使用
- 考虑如何优化代码性能和用户体验
- 探索华为官方文档中更多高级用法
实践是掌握技术的最佳途径,建议读者在理解代码后自行编写和调试。
本文总结
本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习,读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。在实际开发中,建议读者结合官方文档深入理解每个 API 的参数含义和适用场景,并在项目中灵活运用。
技术能力的提升来自于持续的实践和总结,希望读者在阅读本文后能够动手实践,将知识转化为技能。
图片裁剪与旋转
文件读写操作
字体加载最佳实践
- 字体文件体积:字体文件通常较大(2-10MB),建议只加载需要的字体文件
- 异步加载:在 aboutToAppear 中异步加载字体,避免阻塞 UI
- 字体子集化:使用字体子集化工具减小体积,只包含需要的字符
- 缓存策略:字体注册后全局可用,无需重复注册
- 回退字体:使用系统字体作为回退,避免自定义字体加载失败时无字体可用
支持的字体格式
| 格式 | 支持 | 说明 |
|---|---|---|
| TTF | ✅ | TrueType 字体 |
| OTF | ✅ | OpenType 字体 |
| WOFF | ❌ | Web 字体格式 |
| WOFF2 | ❌ | Web 字体格式 |
字体文件管理
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 的参数含义和适用场景,并在项目中灵活运用。
如果这篇文章对你有帮助,欢迎点赞👍、收藏⭐、关注🔔,你的支持是我持续创作的动力!