如何加载和使用自定义字体
============

1.  字体管理中[@ohos.font (注册自定义字体)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-font)。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c3/v3/P9gN3vIyR72erSeliFVZ8w/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T134107Z&HW-CC-Expire=86400&HW-CC-Sign=2F598B29AB1D1157B3A481A53C4D2A3733F5BB3862449CA6D9DA81236A49F0B2)
    
    从DevEco Studio 6.0.0 Beta2版本开始，新建工程或模块时，默认创建的模块不会对非resources目录下的资源进行打包，需使能相关开关：模块的build-profile.json5中buildOption > resOptions > copyCodeResource > enable设置为true，详见resOptions中[copyCodeResource](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-hvigor-build-profile#table1476161719356)相关介绍。
    
2.  设置对应文本的字体家族。可参考以下代码：
    
    _// xxx.ets_
    import { Font } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct FontExample {
      @State message: string = 'Hello World';
    
      aboutToAppear() {
       _ // Register in black font_
        let font: Font = this.getUIContext().getFont()
        font.registerFont({
          familyName: 'Condensed\_Black', _// Registered font name_
          familySrc: '/font/Sans\_Condensed\_Black.ttf' _// The font folder is at the same level as the pages directory_
        })
    
       _ // Register in black oblique font_
        font.registerFont({
          familyName: 'Condensed\_Black\_Italic', _// Registered font name_
          familySrc: '/font/Sans\_Condensed\_Black\_Italic.ttf' _// The font folder is at the same level as the pages directory_
        })
      }
    
      build() {
        Column() {
          Text(this.message)
            .align(Alignment.Center)
            .fontSize(50)
            .fontFamily('Condensed\_Black') _// Use black font_
          Text(this.message)
            .align(Alignment.Center)
            .fontSize(50)
            .fontFamily('Condensed\_Black\_Italic') _// Use black oblique font_
          Text(this.message)
            .align(Alignment.Center)
            .fontSize(50)
        }
        .width('100%')
        .margin({ top: 30 })
      }
    }
    

效果如图所示：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fb/v3/5B3xhE3fQ_6o4-mw1x0Baw/zh-cn_image_0000002654835219.png?HW-CC-KV=V1&HW-CC-Date=20260709T134107Z&HW-CC-Expire=86400&HW-CC-Sign=86935C70FAACA69865E0D23FB8F9077F2E6660354CFFFDE12919E2E31913FA60 "点击放大")