HarmonyOS鸿蒙Next中自定义字体如何使用及应用到全局
HarmonyOS鸿蒙Next中自定义字体如何使用及应用到全局
【问题现象】
遇到的问题:
- 自定义字体如何使用到全局
- 需要用到自定义字体的时候需要去组件一个一个写,没有效率,项目需要使用多种字体。
【背景知识】
ArkTS API:@ohos.font(注册自定义字体)
【解决方案】
自定义字体的应用可以分为注册和使用两步,问题1可以通过注册方式一+两种使用方式解决,问题2可以通过注册方式一+使用方式二解决。
- 注册方式一:在EntryAbility.ets文件,引入font,在onWindowStageCreate生命周期,windowStage.loadContent回调中注册字体:
import font from '@ohos.font';
onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.loadContent('pages/registerFont', (err, data) => {
if (err.code) {
return;
}
font.registerFont({
familyName: 'Beacon',
familySrc: $rawfile('font/Beacon.otf')
})
font.registerFont({
familyName: 'SF',
familySrc: $rawfile('font/SF-Pro-Text-Italic.ttf')
})
})
}
注册方式二:registerFont.ets在页面中使用aboutToAppear方法注册字体familyName:
aboutToAppear() {
font.registerFont({
familyName: 'fontName',
familySrc: $rawfile('font/medium.ttf')
})
}
- 注册字体使用方法一:在相应需要使用的组件添加fontFamily:
@Entry
@Component
struct registerFont {
@State message: string = 'test'
build() {
Column() {
Text(this.message)
.align(Alignment.Center)
.fontSize(50)
.fontFamily('Beacon')
Text(this.message)
.align(Alignment.Center)
.fontSize(50)
.fontFamily('SF')
}.width('100%')
}
}
注册字体使用方法二:在页面的aboutToAppear方法中通过setFont方法使用:
aboutToAppear() {
getContext().getApplicationContext().setFont("fontName");
}
更多关于HarmonyOS鸿蒙Next中自定义字体如何使用及应用到全局的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于HarmonyOS鸿蒙Next中自定义字体如何使用及应用到全局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS Next中,自定义字体的使用和全局应用可以通过以下步骤实现。
-
将自定义字体文件(如
.ttf
或.otf
格式)放置在项目的resources/font
目录下。 -
在
resources/base/element/font.json
文件中定义字体资源,例如:{"name": "CustomFont", "src": "$media:CustomFont"}
-
在
resources/base/profile/theme.json
文件中配置全局字体,例如:{"attr": {"fontFamily": "CustomFont"}}
这样,自定义字体就会应用到整个应用的全局文本中。
如果需要为特定组件或页面设置不同的字体,可以在对应的布局文件中通过ohos:fontFamily
属性指定。