HarmonyOS鸿蒙Next中在web如何设置字体？

HarmonyOS鸿蒙Next中在web如何设置字体？ 发送一封邮件，邮件内容中的文字设置了字体（“Times New Roman"或者"Arial"或者"Courier"或者"Helvetica"或者"sans-serif”），鸿蒙Next版接收后，在WEB组件中展示，同时想要展示字体效果。按现在的文档，系统只支持HarmonyOS Sans字体，那么，在WEB中，如何支持展示其他字体呢？邮件内容是Html格式的字符串，使用web_webview.WebviewController().loadData()加载。

3 回复

目前想要加载其他字体需要引入字体库ttf文件，同时loadData暂时不支持加载本地字体库，只能通过本地html文件加载

经过测试，可以使用richtext来加载html文本，这样可以加载本地字体，具体方法：

  1. 将需要加载的ttf文件放在rawfile下。
  2. 在需要使用的页面内注册字体。

具体请参考以下代码：

import { webview } from '@kit.ArkWeb';

@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  @State data: string = '<html>\n' +
    '<meta charset="utf-8">\n' +
    '<body>\n' +
    '<button type="button" onclick="htmlTest()">Click Me!</button>\n' +
    '<p id="demo" style="font-weight:700" ></p>\n' +
    '<p id="webDemo"></p>\n' +
    '<p id="title" style="font-weight:100;font-size:100px" >这是一段测试文字</p>\n' +
    '</body>\n' +
    '<script type="text/javascript">\n' +
    '\n' +
    '</script>\n' +
    '<style>\n' +
    '    @font-face {\n' +
    '  font-family: \'hanyihuaxianzijianti\';\n' +
    '  src: url(\'resource://rawfile/hanyihuaxianzijianti.ttf\');\n' +
    '}\n' +
    '    #title {\n' +
    '  font-family: \'hanyihuaxianzijianti\';\n' +
    '}\n' +
    '</style>\n' +
    '</html>';

  build() {
    Column() {
      RichText(this.data)
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .backgroundColor(0XBDDB69)
      Text('加载')
        .fontFamily('hanyihuaxianzijianti')
        .margin({ top: 50 })
        .onClick(() => {
        })
    }
  }
}

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


在HarmonyOS鸿蒙Next中，可以通过CSS样式来设置Web页面中的字体。常用的CSS属性包括font-family、font-size、font-weight、font-style等。以下是一个简单的示例：

body {
    font-family: "HarmonyOS Sans", "PingFang SC", sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
}

在这个示例中，font-family指定了字体的优先级，首选HarmonyOS Sans，如果不可用则使用PingFang SC，最后使用系统默认的sans-serif字体。font-size设置字体大小为16像素，font-weight设置字体粗细为正常，font-style设置字体样式为正常。

如果需要在特定的元素中设置字体，可以直接在元素标签中使用style属性，例如：

<p style="font-family: 'HarmonyOS Sans', 'PingFang SC', sans-serif; font-size: 14px; font-weight: bold;">
    这是一个示例文本
</p>

在这个示例中，<p>标签内的文本将使用指定的字体和样式。

此外，还可以通过@font-face规则引入自定义字体文件，例如：

@font-face {
    font-family: 'CustomFont';
    src: url('path/to/font.woff2') format('woff2'),
         url('path/to/font.woff') format('woff');
}

body {
    font-family: 'CustomFont', sans-serif;
}

在这个示例中，@font-face规则定义了一个名为CustomFont的自定义字体，并通过url指定了字体文件的路径。然后，在body中应用了这个自定义字体。

通过这些方法，可以在HarmonyOS鸿蒙Next的Web页面中灵活地设置字体。

在HarmonyOS鸿蒙Next中，Web页面设置字体可以通过CSS实现。使用font-family属性指定字体，例如font-family: 'HarmonyOS Sans', sans-serif;，确保字体文件已加载。若需自定义字体，使用@font-face规则引入字体文件。例如：

@font-face {
    font-family: 'CustomFont';
    src: url('path/to/font.woff2') format('woff2');
}
body {
    font-family: 'CustomFont', sans-serif;
}

确保字体文件路径正确，并在HTML中引用CSS文件。

回到顶部