HarmonyOS鸿蒙Next中如何实现自定义ttf字体，同时具有颜色渐变和描边效果

HarmonyOS鸿蒙Next中如何实现自定义ttf字体，同时具有颜色渐变和描边效果

如何实现自定义ttf字体，同时具有颜色渐变和描边效果

4 回复

注册自定义字体

import font from '@kit.FontKit'

@Entry
@Component
struct CustomTextExample {
aboutToAppear() {
font.registerFont({
familyName: 'myFont',
familySrc: '/fonts/custom.ttf' // 字体文件路径
})
}

描边和字体颜色渐变都需要API 20 才开始支持

图片

从API version 20开始，该示例通过shaderStyle接口实现了对Text组件显示为渐变色和纯色的功能

参考地址

更多关于HarmonyOS鸿蒙Next中如何实现自定义ttf字体，同时具有颜色渐变和描边效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Text组件注册自定义字体：

通过字体管理模块加载TTF文件，并在组件初始化时完成注册，参考文档和案例：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/custom-font-arkts

文字字体样式描边颜色属性说明与样例参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-styled-string#textstyle

文本颜色按线性或径向渐变样例参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text#%E7%A4%BA%E4%BE%8B15%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2%E6%8C%89%E7%BA%BF%E6%80%A7%E6%88%96%E5%BE%84%E5%90%91%E6%B8%90%E5%8F%98

在HarmonyOS Next中实现自定义ttf字体并添加颜色渐变和描边效果：

  1. 字体加载：使用Font类加载ttf字体文件
  2. 文本组件：使用Text组件并设置fontFamily属性
  3. 渐变效果：通过LinearGradient或SweepGradient设置foregroundColor
  4. 描边效果：使用Text的border属性设置描边宽度和颜色

关键代码示例：

Text("渐变描边文本")
.fontFamily("customFont")
.foregroundColor(LinearGradient(...))
.border({width:2, color:Color.Black})

在HarmonyOS Next中实现自定义TTF字体并添加颜色渐变和描边效果，可以通过以下方式实现：

  1. 自定义字体：
  • 将TTF字体文件放入resources/base/media目录
  • 在config.json中声明字体资源
  • 在XML布局中使用fontFamily属性引用
  1. 颜色渐变效果： 使用ArkUI的LinearGradient或SweepGradient：
Text("渐变文字")
  .fontSize(30)
  .fontColor(new LinearGradient({
    angle: 90,
    colors: [Color.Red, Color.Blue]
  }))
  1. 描边效果： 使用Text组件的outline属性：
Text("描边文字")
  .fontSize(30)
  .outline({
    width: 2,
    color: Color.Black
  })

组合实现示例：

Text("自定义效果")
  .fontFamily('myCustomFont') // 引用自定义字体
  .fontSize(40)
  .fontColor(new LinearGradient({
    angle: 0,
    colors: [Color.Red, Color.Yellow, Color.Green]
  }))
  .outline({
    width: 3,
    color: Color.Blue
  })

注意：确保TTF字体文件已正确添加，并在config.json中完成声明。渐变和描边参数可根据实际需求调整。

回到顶部