HarmonyOS 鸿蒙Next 文字字体显示

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

HarmonyOS 鸿蒙Next 文字字体显示

现在项目中有一个这样的需求。

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


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

Harmonyos Next教程
2 回复

目前想要加载其他字体需要引入字体库ttf文件，同时loadData暂时不支持加载本地字体库，只能通过本地html文件加载 可以使用richtext来加载html文本，这样可以加载本地字体，具体方法：

1.将需要加载的ttf文件放在rawfile下。

2.在需要使用的页面内注册字体。

具体请参考以下代码：

// xxx.ets

import { webview } from '[@kit](/user/kit).ArkWeb';

[@Entry](/user/Entry)

[@Component](/user/Component)

struct WebComponent {

  controller: webview.WebviewController = new webview.WebviewController();

  [@State](/user/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: \'xxx\';\n' +

    '  src: url(\'resource://rawfile/xxx.ttf\');\n' +

    '}\n' +

    '    #title {\n' +

    '  font-family: \'xxx\';\n' +

    '}\n' +

    '</style>\n' +

  '</html>

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


HarmonyOS 鸿蒙Next 文字字体显示主要由系统字体库和显示框架共同决定。在鸿蒙系统中，文字字体的显示处理涉及以下几个关键部分：

  1. 字体资源：鸿蒙系统内置了多种字体资源，包括默认字体及多种风格可选字体。这些字体资源存放在系统资源库中，应用程序可以直接调用。

  2. 字体渲染引擎：鸿蒙系统采用了高效的字体渲染引擎，负责将字体资源转换为屏幕上显示的像素。渲染引擎支持多种字体格式，包括矢量字体和位图字体，确保文字在各种显示设备上都能清晰呈现。

  3. 显示框架：鸿蒙系统的显示框架负责将应用程序中的文字内容通过字体渲染引擎处理后，呈现在屏幕上。显示框架支持自定义字体，应用程序可以通过调用相关API，加载并使用自定义字体。

  4. 字体适配：鸿蒙系统针对不同分辨率和屏幕尺寸的设备进行了字体适配，确保文字在不同设备上都能保持一致的显示效果。

  5. 字体权限：应用程序如需使用系统之外的字体资源，需获得相应权限，确保系统的安全性和稳定性。

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

回到顶部