ArkUI中如何使用自定义字体

ArkUI中如何使用自定义字体。

HarmonyOS

FengTianYa

2024-09-25 13:10:32

849浏览

回答 2

按赞同

按时间

鱼弦CTO

在ArkUI中使用自定义字体，可以通过以下步骤实现：

准备字体文件：首先，确保你有要使用的自定义字体文件（比如 .ttf 或 .otf 格式）。
将字体文件添加到项目中：

将字体文件放在你的ArkUI项目的资源目录下。通常可以放在resources文件夹中的子文件夹，比如resources/fonts。

在资源配置文件中声明字体：

编辑你的config.json文件，将自定义字体添加进去。例如，假设你的字体文件名为custom_font.ttf:

{
    "fonts": [
        {
            "name": "customFont",
            "src": "/common/fonts/custom_font.ttf"
        }
    ]
}1.
2.
3.
4.
5.
6.
7.
8.

在代码中引用并使用自定义字体：

@Entry
@Component
struct MyComponent {
    build() {
        Text('Hello, ArkUI!')
            .fontFamily('customFont')
            .fontSize(24)
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.

### 示例详解

#### 项目目录结构

your_project/
├── config.json
├── resources/
│   └── fonts/
│       └── custom_font.ttf
└── src/
    └── MainPage.ets1.
2.
3.
4.
5.
6.
7.

#### config.json 文件

{
    "appID": "com.example.arkui",
    "version": "1.0.0",
    "fonts": [
        {
            "name": "customFont",
            "src": "/common/fonts/custom_font.ttf"
        }
    ],
    // 其他配置信息...
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

#### MainPage.ets 文件

@Entry
@Component
struct MainPage {
    build() {
        Column({ space: 20 }) {
            Text('This is default font.')
                .fontSize(24)
            
            Text('This is custom font.')
                .fontFamily('customFont')
                .fontSize(24)
        }.padding(20)
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.