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

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/d4/v3/2SxS75xPQpODZXNxcsJYZA/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T074703Z&HW-CC-Expire=86400&HW-CC-Sign=2D1D53449B9C385398687DBACFB63B70DC289282E70ADCBE624F9781E9A126B6)
    
    从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/27/v3/i-Z_1oL-SmWahFqlMn4W3Q/zh-cn_image_0000002194158888.png?HW-CC-KV=V1&HW-CC-Date=20260612T074703Z&HW-CC-Expire=86400&HW-CC-Sign=97C908D9354F15A9BE9E80D599CF7067C6AB2FB2C32FAAF8161ED9D0B31EB53C "点击放大")