鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

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

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

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

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

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

HarmonyOS native与webview组件如何使用同一套自定义字体？

HarmonyOS native与webview组件如何使用同一套自定义字体？

HarmonyOS

2024-10-12 12:00:10

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

可以将字体文件放在工程rawfile目录下。

1、在H5代码中使用@font-face指定用于显示文本的自定义字体，在指定元素中配置font-family属性设置自定义字体。示例代码：

<!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: 'MaoKenWangXingYuan';  
        src: url('./MaoKenWangXingYuan.ttf');  
      }  
      #title {  
        font-family: 'MaoKenWangXingYuan';  
      }  
    </style>  
  </head>  
  <body>  
    <h1 id="title">猫啃忘形圆</h1>  
  </body>  
</html>

2、native使用自定义字体。

import font from '@ohos.font';  
@Entry  
@Component  
struct Index {  
  @State message: string = 'Hello World';  
  aboutToAppear() {  
    font.registerFont({  
      familyName: 'iconfont',  
      familySrc: $rawfile('iconfont.ttf')  
    })  
  }  
  build() {  
    Row() {  
      Column() {  
        Text("\ue6fb")  
          .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
          .fontFamily("iconfont")  
        Image("xxx")  
          .alt($r("app.media.startIcon"))  
          .width(300)  
          .height(300)  
          .onError(() => {  
            console.log("图片加载失败。。。")  
          })  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}

回复

2024-10-12 16:51:35

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

发布

相关问题

HarmonyOS 使用自定义字体

241浏览 • 1回复待解决

IPC行业里面的liteos和liteos-a是同一套么？

7299浏览 • 1回复待解决

ArkUI中如何使用自定义字体

811浏览 • 2回复待解决

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

2199浏览 • 1回复待解决

HarmonyOS 如何设置自定义字体

847浏览 • 1回复待解决

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

2337浏览 • 1回复待解决

Native与TS互传自定义obj class

973浏览 • 1回复待解决

Ark UI是否如何使用自定义字体

3275浏览 • 1回复待解决

鸿蒙一套代码如何做到多端适配呢？

3463浏览 • 1回复待解决

如何自定义字体替换系统字体？

426浏览 • 1回复待解决

hvigor如何对一套代码实现差异化打包

468浏览 • 1回复待解决

如何实现一个自定义的Controller？ 自定义的Controller与自定义的组件page如何进行交互？

1977浏览 • 1回复待解决

HarmonyOS 请提供一套成熟的项目架构模版

243浏览 • 1回复待解决

HarmonyOS WebView使用自定义键盘问题

16浏览 • 1回复待解决

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

1979浏览 • 1回复待解决

HarmonyOS WebView设置自定义UserAgent

275浏览 • 1回复待解决

自定义构建函数Buider与自定义组件component的使用区别以及限制是什么

2549浏览 • 1回复待解决

鸿蒙中如何自定义字体文件

19472浏览 • 1回复待解决

HarmonyOS 自定义组件如何写自定义事件?

550浏览 • 1回复待解决

ArkTS如何自定义加载，设置字体fontFamily

636浏览 • 2回复待解决

HarmonyOS 有没有相关清理缓存一套逻辑和相关代码呢

511浏览 • 0回复待解决

HarmonyOS 如何在ablity中加载完成自定义字体

276浏览 • 1回复待解决

HarmonyOS 自定义弹窗如何与Component双向同步一些变量？

319浏览 • 1回复待解决

HarmonyOS 自定义UI组件如何自定义属性方法

469浏览 • 1回复待解决

HarmonyOS CanvasRenderingContext2D使用不了自定义字体

282浏览 • 1回复待解决

提问

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

相关讨论帖

如何使用自定义组件实现圆形抽奖转盘 0回复

Openharmony应用开发与入门-----自定义组件抽取与使用 0回复

HarmonyOS API：自定义组件 0回复

HarmonyOS 自定义列表组件 3回复

HarmonyOS API：自定义组件 0回复

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