如何在HarmonyOS鸿蒙Next中引入iconFont

如何在HarmonyOS鸿蒙Next中引入iconFont 如何引入IconFont,官方文档有相关说明或实例吗？

3 回复

需要拿到字体库对应的ttf文件。然后通过自定义字体 @ohos.font 的接口去注册，在Text上使用对应的unicode编码格式就可以使用了。

//entryAbility.ts
//font需要依赖UIContext所以需要在windowStage加载页面完成之后去注册
windowStage.loadContent('pages/Page', (err) => {
  font.registerFont({
    familyName: 'iconfont',
    familySrc: $rawfile('AlimamaDaoLiTi.ttf')
  })
  
  if (err.code) {
    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
    return;
  }
  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});

//Page.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Row() {
      Column() {
        Text("\ue6fb")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontFamily("iconfont")
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于如何在HarmonyOS鸿蒙Next中引入iconFont的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中引入iconFont可以通过以下步骤实现：

  1. 准备iconFont文件：首先，确保你有一个iconFont文件，通常是.ttf或.otf格式的字体文件。

  2. 将iconFont文件放入项目：将字体文件放入项目的resources/base/media目录下。

  3. 在config.json中声明字体：在config.json文件的"module"部分中添加字体资源的声明。例如：

    {
  "module": {
    "resources": [
      {
        "name": "iconfont",
        "type": "font",
        "src": "$media:iconfont.ttf"
      }
    ]
  }
}

  4. 在.hml文件中使用iconFont：在.hml文件中，使用<text>标签并设置font-family属性为iconFont的名称。例如：

    <text class="iconfont">&#xe600;</text>

  5. 在.css文件中定义样式：在.css文件中，定义font-family样式以使用iconFont。例如：

    .iconfont {
  font-family: iconfont;
  font-size: 24px;
  color: #000000;
}

通过以上步骤，你可以在HarmonyOS鸿蒙Next项目中成功引入并使用iconFont。

在HarmonyOS鸿蒙Next中引入iconFont，可以通过以下步骤实现：

  1. 获取iconFont文件：从iconFont平台（如阿里iconFont）下载字体文件（.ttf或.woff格式）。

  2. 放置字体文件：将下载的字体文件放入项目的resources/base/media目录下。

  3. 声明字体资源：在resources/base/element/string.json中声明字体资源，例如：

    {
  "name": "iconfont",
  "value": "media/iconfont.ttf"
}

  4. 使用iconFont：在布局文件中通过Text组件使用iconFont，例如：

    <Text
  fontFamily="iconfont"
  text="&#xe600;"
  fontSize="24fp"
  color="black"/>
回到顶部