前言在“海风日记“的日记详情页中正文区域使用了纸张感的设计象牙色背景、serif 衬线字体、36vp 行高模拟了传统日记本的横线纸张效果。本文将从源码出发深入讲解纸张效果的实现以及字体选择、行高控制和背景色搭配。一、纸张效果实现1.1 源码// 正文日记本横线背景模拟 Text(this.diary.content) .width(100%) .fontSize(16) .fontColor(COLOR_TEXT_MAIN) .lineHeight(36) // 大行高模拟横线间距 .fontFamily(serif) // 衬线字体 .padding({ left: PAGE_PADDING 4, right: PAGE_PADDING, top: 8, bottom: 8 }) // 底部签名装饰 Column({ space: 8 }) { Divider().color(rgba(200,149,106,0.20)) Row({ space: 8 }) { Text(— 海风日记).fontSize(13).fontColor(COLOR_AMBER).fontStyle(FontStyle.Italic) Blank() Text(this.diary.date).fontSize(12).fontColor(COLOR_TEXT_HINT) } }1.2 纸张背景色export const COLOR_PAPER_BG #FFF9F0 // 象牙色背景二、字体选择2.1 fontFamily.fontFamily(serif) // 衬线字体fontFamily支持多种字体值说明效果serif衬线字体经典、正式适合阅读sans-serif无衬线字体现代、简洁monospace等宽字体代码风格HarmonyOS Sans鸿蒙系统字体默认字体2.2 正文字体设置// 详情页衬线字体 Text(this.diary.content) .fontFamily(serif) .lineHeight(36) // 写日记页默认字体 TextArea({ placeholder: ..., text: this.diaryText }) .lineHeight(32)三、行高和间距3.1 行高的作用行高控制文字行与行之间的垂直间距.lineHeight(36) // 行高 36vp适合阅读3.2 签名装饰Column({ space: 8 }) { Divider().color(rgba(200,149,106,0.20)) // 浅琥珀色分隔线 Row({ space: 8 }) { Text(— 海风日记) .fontSize(13).fontColor(COLOR_AMBER) .fontStyle(FontStyle.Italic) // 斜体 Blank() Text(this.diary.date) .fontSize(12).fontColor(COLOR_TEXT_HINT) } } .margin({ top: 32, bottom: 40 })四、常见问题4.1 字体显示异常问题设置了fontFamily(serif)但字体没有变化。原因系统可能不支持该字体。解决方案使用系统支持的字体名称。总结本文通过“海风日记“的日记详情页深入讲解了纸张效果的实现纸张背景象牙色#FFF9F0衬线字体serif经典阅读体验行高控制36vp模拟横线间距签名装饰斜体签名 日期下一篇文章将深入讲解Scroll 水平滚动图片展示区敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Text 组件文档fontFamily 属性文档Divider 组件文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
