鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 25年5月软考 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

HarmonyOS 如何全局注册字体并在Web使用

HarmonyOS

2024-12-25 07:52:02

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

全局字体注册

字体文件放在rawfile下

Ability初始化时注册

import { font } from '@kit.ArkUI'
...
onWindowStageCreate(windowStage: window.WindowStage): void {
  windowStage.loadContent('pages/Index', (err) => {
  ...
  font.registerFont( {
    familyName: 'TEST',
    familySrc: $rawfile('test.TTF')
  })
}
}

在全局页面可以使用

build() {
  Column() {
    Text('Font: Default')
    Text('Font: Test')
      .fontFamily('TEST')
  }
}

Web字体

字体文件放在rawfile下

html（Demo放在rawfile同级）

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
@font-face {
  font-family: 'TEST';
  src: url('test.TTF');
}

#test1 {
  font-family: 'TEST';
}
</style>
  </head>
  <body>
  <div id="test1">自定义字体1, Font</div>
  <div style="font-family:TEST;">自定义字体2, Font</div>
  </body>
  </html>

两种引用方式都生效

字体文件名大小写需保持一致

回复

2024-12-25 10:48:50

如何写精华回答，获更多曝光？

发布

相关问题

HarmonyOS 自定义字体全局统一注册的方式

262浏览 • 1回复待解决

HarmonyOS 如何设置全局字体

290浏览 • 1回复待解决

HarmonyOS 下载字体后使用font.registerFont注册字体后字体没有正常加载

587浏览 • 1回复待解决

HarmonyOS 全局设置字体

53浏览 • 1回复待解决

HarmonyOS 全局字体

178浏览 • 1回复待解决

HarmonyOS 全局设置字体没效果

175浏览 • 1回复待解决

HarmonyOS 全局自定义字体

299浏览 • 1回复待解决

HarmonyOS 全局自定义字体

321浏览 • 1回复待解决

HarmonyOS 设置字体有全局方法吗？

574浏览 • 1回复待解决

#鸿蒙通关秘籍#如何在HarmonyOS中实现动态字体注册功能？

544浏览 • 1回复待解决

HarmonyOS web显示字体很小

138浏览 • 1回复待解决

HarmonyOS 全局设置自定义字体的方法

214浏览 • 1回复待解决

HarmonyOS 设置全局字体没有效果

240浏览 • 1回复待解决

HarmonyOS web如何拦截到页面字体资源请求

140浏览 • 1回复待解决

HarmonyOS ArkTS Web组件如何设置全局代理

276浏览 • 1回复待解决

注册的自定义字体在 webview 中无效

2519浏览 • 1回复待解决

全局设置字体大小方案咨询

605浏览 • 1回复待解决

HarmonyOS 应用内调整全局字体大小

298浏览 • 1回复待解决

HarmonyOS 如何使用全局水印

159浏览 • 1回复待解决

#鸿蒙通关秘籍# 如何在HarmonyOS中动态下载并注册自定义字体？

270浏览 • 0回复待解决

HarmonyOS Web组件加载富文本字体太小，如何设置字体大小？

994浏览 • 1回复待解决

HarmonyOS webview使用javaScriptProxy时如何注册多个name

162浏览 • 1回复待解决

HarmonyOS font.registerFont 是全局生效的吗？对于一种字体，应用全局注册一次是不是就能应用生命周期内所有页面都生效？

152浏览 • 1回复待解决

@ohos.font (注册自定义字体) 自定义字体不支持动态更新？

2193浏览 • 1回复待解决

HarmonyOS 怎么在ability中配置全局的字体？

593浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

#HarmonyOS NEXT 体验官#手把手教你IconFont字体图标如何在HarmonyOSNext项目中当做字体使用 0回复

如何使用Flutter开发web应用 0回复

HarmonyOS—使用Web组件加载页面 0回复

HarmonyOS API：全局UI方法 0回复

全新 HarmonyOS 字体来啦 8回复

Copyright © 2005-2025 51CTO.COM 京ICP证060544版权所有未经许可请勿转载