鸿蒙开发者社区

公众号矩阵

移动端

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

全部课程软考信创认证华为认证厂商认证 IT技术 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 使用自定义字体

1246浏览 • 1回复待解决

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

8807浏览 • 1回复待解决

ArkUI中如何使用自定义字体

2589浏览 • 2回复待解决

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

3295浏览 • 1回复待解决

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

3565浏览 • 1回复待解决

HarmonyOS 能否默认使用自定义字体

800浏览 • 1回复待解决

HarmonyOS 如何设置自定义字体

1907浏览 • 1回复待解决

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

4094浏览 • 1回复待解决

HarmonyOS 自定义了一个组件，如何自定义事件？使其能在父组件使用其自定义事件

1164浏览 • 1回复待解决

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

1579浏览 • 1回复待解决

HarmonyOS 自定义字体绘制

1249浏览 • 1回复待解决

Native与TS互传自定义obj class

1819浏览 • 1回复待解决

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

4764浏览 • 1回复待解决

HarmonyOS 全局自定义字体

1040浏览 • 1回复待解决

HarmonyOS 全局自定义字体

1338浏览 • 1回复待解决

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

3104浏览 • 1回复待解决

HarmonyOS 怎么设置自定义字体并获取自定义字体的宽度，高度

1164浏览 • 1回复待解决

HarmonyOS RN 项目中使用自定义字体

1430浏览 • 1回复待解决

HarmonyOS WebView使用自定义键盘问题

1189浏览 • 1回复待解决

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

1913浏览 • 1回复待解决

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

1166浏览 • 1回复待解决

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

2980浏览 • 1回复待解决

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

21116浏览 • 1回复待解决

HarmonyOS 深色模式适配，需要准备另一套资源吗？

1361浏览 • 1回复待解决

HarmonyOS 自定义组件的使用

1209浏览 • 1回复待解决

提问

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

相关讨论帖

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

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

HarmonyOS API：自定义组件 0回复

HarmonyOS 自定义列表组件 3回复

HarmonyOS API：自定义组件 0回复

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