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

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

HarmonyOS
2024-10-12 12:00:10
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以将字体文件放在工程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%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-12 16:51:35
相关问题
HarmonyOS 使用自定义字体
110浏览 • 1回复 待解决
如何使用和加载自定义字体
1995浏览 • 1回复 待解决
ArkUI中如何使用自定义字体
488浏览 • 2回复 待解决
HarmonyOS 如何设置自定义字体
654浏览 • 1回复 待解决
Ark UI是否如何使用自定义字体
3191浏览 • 1回复 待解决
注册的自定义字体webview 中无效
2170浏览 • 1回复 待解决
NativeTS互传自定义obj class
889浏览 • 1回复 待解决
如何自定义字体替换系统字体
322浏览 • 1回复 待解决
鸿蒙中如何自定义字体文件
19167浏览 • 1回复 待解决
鸿蒙一套代码如何做到多端适配呢?
3300浏览 • 1回复 待解决
HarmonyOS WebView设置自定义UserAgent
128浏览 • 1回复 待解决
hvigor如何一套代码实现差异化打包
301浏览 • 1回复 待解决
自定义组件onMeasureSize的使用
262浏览 • 1回复 待解决