【鸿蒙next开发】ArkUI框架:UI界面-@ohos.font (注册自定义字体)_this.uicontext.getfont().registerfont
往期鸿蒙5.0全套实战文章必看:(文中附带鸿蒙5.0全栈学习资料)
-
鸿蒙开发核心知识点,看这篇文章就够了
-
最新版!鸿蒙HarmonyOS Next应用开发实战学习路线
-
鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
-
鸿蒙应用开发实战项目,看这一篇文章就够了(部分项目附源码)
@ohos.font (注册自定义字体)
本模块提供注册自定义字体。
说明
本模块首批接口从API version 9开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。
本模块功能依赖UI的执行上下文,不可在UI上下文不明确的地方使用,参见UIContext说明。
从API version 10开始,可以通过使用UIContext中的getFont方法获取当前UI上下文关联的Font对象。
导入模块
import { font } from \'@kit.ArkUI\'
font.registerFont
registerFont(options: FontOptions): void
在字体管理中注册自定义字体。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
FontOptions
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
示例:
说明
推荐通过使用UIContext中的getFont方法获取当前UI上下文关联的Font对象。
// xxx.etsimport { font } from \'@kit.ArkUI\';@Entry@Componentstruct FontExample { @State message: string = \'Hello World\'; // iconFont示例,假设0000为指定icon的Unicode,实际需要开发者从注册的iconFont的ttf文件里面获取Unicode @State unicode: string = \'\\u0000\'; @State codePoint: string = String.fromCharCode(0x0000); aboutToAppear() { // familyName和familySrc都支持系统Resource font.registerFont({ // 建议使用 this.getUIContext().getFont().registerFont()接口 familyName: $r(\'app.string.font_name\'), familySrc: $r(\'app.string.font_src\') }) // familySrc支持RawFile font.registerFont({ familyName: \'mediumRawFile\', familySrc: $rawfile(\'font/medium.ttf\') }) // 注册iconFont font.registerFont({ familyName: \'iconFont\', familySrc: \'/font/iconFont.ttf\' }) // familyName和familySrc都支持string font.registerFont({ familyName: \'medium\', familySrc: \'/font/medium.ttf\' // font文件夹与pages目录同级 }) } build() { Column() { Text(this.message) .align(Alignment.Center) .fontSize(20) .fontFamily(\'medium\') // medium:注册自定义字体的名字($r(\'app.string.mediumFamilyName\')、\'mediumRawFile\'等已注册字体也能正常使用) // 使用iconFont的两种方式 Text(this.unicode) .align(Alignment.Center) .fontSize(20) .fontFamily(\'iconFont\') Text(this.codePoint) .align(Alignment.Center) .fontSize(20) .fontFamily(\'iconFont\') }.width(\'100%\') }}
说明
应用若需全局使用自定义字体,请在EntryAbility.ets文件的onWindowStageCreate生命周期中,通过windowStage.loadContent回调注册。
在HSP工程中,不推荐采用相对路径的方式注册自定义字体。
font.getSystemFontList10+
getSystemFontList(): Array
获取风格字体列表。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
返回值:
说明
该接口仅在2in1设备上生效。
示例:
说明
推荐通过使用UIContext中的getFont方法获取当前UI上下文关联的Font对象。
// xxx.etsimport { font } from \'@kit.ArkUI\';@Entry@Componentstruct FontExample { fontList: Array = new Array(); build() { Column() { Button(\"getSystemFontList\") .width(\'60%\') .height(\'6%\') .onClick(() => { this.fontList = font.getSystemFontList() // 建议使用 this.getUIContext().getFont().getSystemFontList()接口 }) }.width(\'100%\') }}
font.getFontByName10+
getFontByName(fontName: string): FontInfo
根据传入的系统字体名称获取系统字体的相关信息。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
返回值:
FontInfo10+
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
示例:
说明
推荐通过使用UIContext中的getFont方法获取当前UI上下文关联的Font对象。
// xxx.etsimport { font } from \'@kit.ArkUI\';@Entry@Componentstruct FontExample { fontList: Array = new Array(); fontInfo: font.FontInfo = font.getFontByName(\'\'); build() { Column() { Button(\"getFontByName\") .onClick(() => { this.fontInfo = font.getFontByName(\'HarmonyOS Sans Italic\') // 建议使用 this.getUIContext().getFont().getFontByName()接口 console.log(\"getFontByName(): path = \" + this.fontInfo.path) console.log(\"getFontByName(): postScriptName = \" + this.fontInfo.postScriptName) console.log(\"getFontByName(): fullName = \" + this.fontInfo.fullName) console.log(\"getFontByName(): Family = \" + this.fontInfo.family) console.log(\"getFontByName(): Subfamily = \" + this.fontInfo.subfamily) console.log(\"getFontByName(): weight = \" + this.fontInfo.weight) console.log(\"getFontByName(): width = \" + this.fontInfo.width) console.log(\"getFontByName(): italic = \" + this.fontInfo.italic) console.log(\"getFontByName(): monoSpace = \" + this.fontInfo.monoSpace) console.log(\"getFontByName(): symbolic = \" + this.fontInfo.symbolic) }) }.width(\'100%\') }}
font.getUIFontConfig11+
getUIFontConfig() : UIFontConfig
获取系统的UI字体配置。
元服务API: 从API version 12开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
返回值:
UIFontConfig11+
元服务API: 从API version 12开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
UIFontGenericInfo11+
元服务API: 从API version 12开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
UIFontFallbackGroupInfo11+
元服务API: 从API version 12开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
UIFontAliasInfo11+
元服务API: 从API version 12开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
UIFontAdjustInfo11+
元服务API: 从API version 12开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
UIFontFallbackInfo11+
元服务API: 从API version 12开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
示例:
// xxx.etsimport { font } from \'@kit.ArkUI\';@Entry@Componentstruct FontExample { build() { Column() { Button(\"getUIFontConfig\") .width(\'60%\') .height(\'6%\') .margin(50) .onClick(() => { let fontConfig = font.getUIFontConfig(); console.log(\"font-dir -----------\" + String(fontConfig.fontDir.length)); for (let i = 0; i < fontConfig.fontDir.length; i++) { console.log(fontConfig.fontDir[i]); } console.log(\"generic-------------\" + String(fontConfig.generic.length)); for (let i = 0; i < fontConfig.generic.length; i++) { console.log(\"family:\" + fontConfig.generic[i].family); for (let j = 0; j < fontConfig.generic[i].alias.length; j++) { console.log(fontConfig.generic[i].alias[j].name + \" \" + fontConfig.generic[i].alias[j].weight); } for (let j = 0; j < fontConfig.generic[i].adjust.length; j++) { console.log(fontConfig.generic[i].adjust[j].weight + \" \" + fontConfig.generic[i].adjust[j].to); } } console.log(\"fallback------------\" + String(fontConfig.fallbackGroups.length)); for (let i = 0; i < fontConfig.fallbackGroups.length; i++) { console.log(\"fontSetName:\" + fontConfig.fallbackGroups[i].fontSetName); for (let j = 0; j < fontConfig.fallbackGroups[i].fallback.length; j++) { console.log(\"language:\" + fontConfig.fallbackGroups[i].fallback[j].language + \" family:\" + fontConfig.fallbackGroups[i].fallback[j].family); } } }) }.width(\'100%\') }}