HarmonyOS 鸿蒙Next中一种字体，不同的粗细在不同的字体文件中，怎么注册呢？

HarmonyOS 鸿蒙Next中一种字体，不同的粗细在不同的字体文件中，怎么注册呢？

fonts:

  • family: PingFangSC fonts:
    • asset: assets/fonts/PingFangSC-Regular.ttf
    • asset: assets/fonts/PingFangSC-Medium.ttf weight: 500
    • asset: assets/fonts/PingFangSC-Semibold.ttf weight: 600
  • family: FusionPixel fonts:
    • asset: assets/fonts/FusionPixel.otf
  • family: Oswald fonts:
    • asset: assets/fonts/Oswald-SemiBold.ttf weight: 600

这是 flutter中的注册方式，多个相同字体但不同粗细的字体文件可以注册在 同一个 font-family下，在设置字体 font-weight 时，会对应到相应的字体文件。

如何像上述一样将多个字体粗细的文件注册到同一个font-family中呢？

这是按API参考文档注册的:

font.registerFont({
      familyName: 'PingFangSC-Regular',
      familySrc: $rawfile('PingFangSC-Regular.ttf')
    })
    
font.registerFont({
      familyName: 'PingFangSC-Medium',
      familySrc: $rawfile('PingFangSC-Medium.ttf')
    })

将fontweight设置成200，无效。

Text($r('app.string.splash_main_title'))

          .fontFamily('PingFangSC-Medium')
          .fontWeight('200')

更多关于HarmonyOS 鸿蒙Next中一种字体，不同的粗细在不同的字体文件中，怎么注册呢？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在鸿蒙Next中注册不同粗细的字体文件，需在resources/base/element目录创建font.json。格式如下：

{
  "fonts": [
    {
      "name": "HarmonySans",
      "weight": 400,
      "src": "$media:font_regular"
    },
    {
      "name": "HarmonySans",
      "weight": 700,
      "src": "$media:font_bold"
    }
  ]
}

其中weight对应字体粗细值(100-900)，src指向对应字体资源路径。同一字体家族(name相同)的不同weight会自动关联。

更多关于HarmonyOS 鸿蒙Next中一种字体，不同的粗细在不同的字体文件中，怎么注册呢？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可以通过以下方式注册同一字体家族的不同粗细变体：

  1. 使用registerFontAPI时，需要为同一字体家族的不同粗细指定相同的familyName，并通过weight参数区分：
// 注册同一字体家族的不同粗细
font.registerFont({
  familyName: 'PingFangSC',
  familySrc: $rawfile('PingFangSC-Regular.ttf'),
  weight: 400  // 常规粗细
})

font.registerFont({
  familyName: 'PingFangSC',
  familySrc: $rawfile('PingFangSC-Medium.ttf'),
  weight: 500  // 中等粗细
})

font.registerFont({
  familyName: 'PingFangSC',
  familySrc: $rawfile('PingFangSC-Semibold.ttf'),
  weight: 600  // 半粗体
})
  1. 使用时只需指定字体家族名称，系统会自动匹配对应的粗细：
Text($r('app.string.splash_main_title'))
  .fontFamily('PingFangSC')
  .fontWeight(500)  // 会自动使用PingFangSC-Medium.ttf

注意点：

  • 确保所有变体使用完全相同的familyName
  • weight参数值应符合CSS规范(100-900，间隔100)
  • 字体文件需要放在resources/rawfile目录下，
回到顶部