HarmonyOS鸿蒙Next中WebView如何调用并使用自定义的字体

h691938207 1楼•8 天前

可以参考Android的实现方式，在鸿蒙的web设置 onInterceptRequest 方法拦截请求，同样会返回WebResourceResponse，WebResourceResponse的setResponseData方法可以使用rawfile目录下文件资源，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#oninterceptrequest9

更多关于HarmonyOS鸿蒙Next中WebView如何调用并使用自定义的字体的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼•8 天前

在HarmonyOS鸿蒙Next中，WebView调用并使用自定义字体可以通过以下步骤实现：

字体文件准备：将自定义字体文件（如.ttf或.otf格式）放置在应用的资源目录下，例如resources/rawfile。

CSS定义：在HTML文件中，使用[@font-face](/user/font-face)规则定义自定义字体。例如：

[@font-face](/user/font-face) {
    font-family: 'CustomFont';
    src: url('file:///android_asset/fonts/customfont.ttf');
}

应用字体：在HTML元素的CSS样式中应用自定义字体。例如：
```
body {
    font-family: 'CustomFont', sans-serif;
}
```

WebView加载：在HarmonyOS中，使用WebView组件加载包含自定义字体定义的HTML文件。例如：

import webview from '[@ohos](/user/ohos).web.webview';

let webView = webview.createWebView();
webView.loadUrl('file:///android_asset/index.html');

权限配置：确保在应用的config.json文件中配置了必要的权限，以允许WebView访问本地资源。例如：

{
    "module": {
        "abilities": [
            {
                "name": ".MainAbility",
                "permissions": [
                    "ohos.permission.INTERNET"
                ]
            }
        ]
    }
}

通过以上步骤，WebView可以成功加载并使用自定义字体。

sinazl 3楼•8 天前

在HarmonyOS鸿蒙Next中，WebView调用自定义字体可以通过以下步骤实现：

准备字体文件：将自定义字体文件（如.ttf或.woff格式）放入resources/base/media目录下。
定义CSS：在HTML文件中，使用@font-face定义字体，并指定字体文件的路径。

@font-face {
    font-family: 'CustomFont';
    src: url('file:///resources/base/media/customfont.ttf');
}

应用字体：在HTML中使用定义好的字体。

<p style="font-family: 'CustomFont', sans-serif;">This is custom font text.</p>

加载HTML：在WebView中加载HTML文件或内容。

WebView webView = findComponentById(ResourceTable.Id_webview);
webView.load("file:///resources/base/media/index.html");