HarmonyOS 鸿蒙Next H5字体设置

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next H5字体设置

H5里面怎么使用我APP里面自定义的字体?

Harmonyos Next教程
2 回复

如果web页面是通过 Web({ src: $rawfile(‘xx.html’), controller: this.controller }) 这种方式引用H5页面的话，可引用App的字体。

1.把字体放在rawfile目录 示例xx.html

<!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: 'xxx';
          src: url('./xxx.ttf');
        }

        #title {
          font-family: 'xxx';
        }
    </style>
</head>
<body>
<h1 id="title">测试字体引用</h1>
</body>
</html>

2、直接loadData加载html源码设置

@Entry
@Component
struct Index {

  controller: webview.WebviewController = new webview.WebviewController();
  updataContent: string = '<body><div><image src=resource://rawfile/xiaocao.png alt="image -- end" width="500" height="250"></image></div></body>'
 
  content:string  = `<!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: 'aishitoutoucangbuzhu';
          src: url('./aishitoutoucangbuzhu.ttf');
        }

        #title {
          font-family: 'aishitoutoucangbuzhu';
        }
    </style>
</head>
<body>
<Text id="title">猫啃忘形圆</Text>
</body>
</html>`

  build() {

       Column() {
          Web({ src: "", controller: this.controller }).onControllerAttached(()=>{
           this.controller.loadData(encodeURIComponent(this.content), "text/html", "UTF-8",);
         })
     
  
       }
       .width('100%')
     .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next H5字体设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


作为IT专家，对于HarmonyOS鸿蒙Next H5字体设置的问题，以下是我的解答：

在HarmonyOS鸿蒙Next系统中，H5页面的字体设置通常依赖于网页本身的CSS样式。鸿蒙系统本身并不直接提供对H5页面字体大小的全局设置选项，但你可以通过以下几种方式来实现字体设置：

  1. CSS样式表：在H5页面的<head>部分引入CSS样式表，通过CSS规则来设置字体的大小、颜色、样式等属性。
  2. 内联样式：直接在HTML标签中使用style属性来设置字体属性。例如，<p style="font-size: 16px;">来设置段落的字体大小为16像素。
  3. JavaScript动态设置：通过JavaScript代码动态地修改H5页面中的字体设置。可以在页面加载时，或者在用户交互时（如点击按钮）来修改字体属性。

如果你是在开发鸿蒙应用中的H5页面，并且希望实现全局字体设置的功能，可以考虑在应用层面提供一个设置选项，通过JavaScript将用户的设置应用到H5页面的CSS样式中。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部