HarmonyOS鸿蒙Next中web组件将本地三方字体文件绝对路径传给H5使用时未能生效

HarmonyOS鸿蒙Next中web组件将本地三方字体文件绝对路径传给H5使用时未能生效

字体绝对路径：file:///data/storage/el2/base/haps/entry/cache/xxx_font_title.ttf  
截图中的模版news_detail.html文件H5可以使用，但是三方字体H5就未生效  

工程机版本：Developer Beta5  

DevEco Studio版本：Build Version: 5.0.3.800, built on September 4, 2024  

SDK版本：5.0025  

示例代码：  
@Builder  
middleWebComponent() {  
    if (StringUtil.isNotEmpty(this.news_detail_html)) {  
        Web({ src: '', controller: this.controller })  
            .backgroundColor(ThemeModel.getWhiteBgColor())  
            .width(StyleUtil.FULL_WIDTH)  
            .layoutWeight(1)  
            .javaScriptAccess(true)  
            .domStorageAccess(true)  
            .fileAccess(true)  
            .darkMode(WebDarkMode.Auto)  
            .textZoomRatio(this.ratio)  
            .javaScriptProxy({  
                // TODO 设置与H5交互方法，registerJavaScriptProxy这种方法无法实现getJsonStr方法，只能使用javaScriptProxy  
                object: this.javaScript,  
                name: JavaScriptProxyConstant.commonName,  
                methodList: [  
                    // h5调用web方法  
                    JavaScriptProxyConstant.getJsonStr,  
                    JavaScriptProxyConstant.jumpIndexOrReport,  
                    JavaScriptProxyConstant.jumpReportDetail,  
                    // web调用H5方法  
                    JavaScriptProxyConstant.getContentText  
                ],  
                controller: this.controller,  
            })  
            .onControllerAttached(() => {  
                this.controller.setCustomUserAgent(Api.getCustomUserAgent())  
                this.controller.loadUrl(this.news_detail_html)  
            })  
            .onErrorReceive((event) => {  
                if (event) {  
                    console.log('getErrorInfo:' + event.error.getErrorInfo());  
                    console.log('getErrorCode:' + event.error.getErrorCode());  
                    console.log('url:' + event.request.getRequestUrl());  
                    console.log('isMainFrame:' + event.request.isMainFrame());  
                    console.log('isRedirect:' + event.request.isRedirect());  
                    console.log('isRequestGesture:' + event.request.isRequestGesture());  
                    console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString());  
                    let result = event.request.getRequestHeader();  
                    console.log('The request header result size is ' + result.length);  
                    for (let i of result) {  
                        console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue);  
                    }  
                }  
            })  
            .onPageBegin(() => {  
            })  
            .onPageEnd((event) => {  
                if (!this.reloaded) {  
                    this.reloaded = true  
                    // web主动调用H5方法，设置ip地址  
                    if (this.article && this.article.articleType == ArticleType.PLAIN) {  
                        if (!this.isPaper) { // 数字报稿件不设置ip  
                            let ipAddressText: string = ArticleViewModel.getIpAddressText(this.article)  
                            this.controller.runJavaScript(`${JavaScriptProxyConstant.sendTerritoryIP}('${ipAddressText}');`)  
                        }  
                    }  
                }  
                setTimeout(() => {  
                    // 设置文章标题三方字体  
                    let titleFontPath: string = FileManagerUtil.getFilePath('xky_font_title.ttf')  
                    let startUrl: string = 'file://' + titleFontPath  
                    let javaScriptStr: string = `${JavaScriptProxyConstant.changTitleFont}('${startUrl}')`  
                    // javaScriptStr = `${JavaScriptProxyConstant.changTitleFont}('./xxx_font_title.ttf')`  
                    // javaScriptStr = `${JavaScriptProxyConstant.changTitleFont}('xxx_font_title.ttf')`  
                    this.controller.runJavaScript(javaScriptStr)  
                }, 3 * 1000)  
            })  
        }  
    }

更多关于HarmonyOS鸿蒙Next中web组件将本地三方字体文件绝对路径传给H5使用时未能生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

如果您的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>

加载url方式的目前没法引用

@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中web组件将本地三方字体文件绝对路径传给H5使用时未能生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Web组件加载本地三方字体文件时，若通过绝对路径传递给H5页面但未能生效，可能的原因如下：

  1. 路径问题：Web组件加载本地文件时，路径可能未正确解析或访问权限不足，导致H5页面无法正确加载字体文件。

  2. 字体文件格式：确保字体文件格式（如.ttf、.otf等）兼容H5页面，且文件未损坏。

  3. CSS引用问题：H5页面中通过CSS引用字体文件时，路径可能未正确指向Web组件提供的绝对路径，或CSS未正确加载。

  4. 跨域限制：若H5页面与Web组件存在跨域问题，可能导致字体文件加载失败。

  5. 缓存问题：浏览器或Web组件可能缓存了旧的资源，导致新字体文件未生效。

解决方法：

  1. 验证路径：确保Web组件提供的绝对路径正确，且H5页面能通过该路径访问字体文件。

  2. 检查CSS：确认H5页面中CSS引用字体文件的路径与Web组件提供的路径一致。

  3. 清理缓存：清理浏览器或Web组件缓存，确保加载最新资源。

  4. 调试工具：使用浏览器开发者工具检查网络请求，确认字体文件是否成功加载。

若问题仍未解决，需进一步排查具体环境配置或代码实现。

在HarmonyOS鸿蒙Next中使用Web组件时，如果尝试将本地三方字体文件的绝对路径传递给H5页面但未能生效，可能是由于路径解析或权限问题。建议检查以下几点：

  • 路径正确性：确保字体文件的绝对路径在HarmonyOS系统中是有效的，并且文件确实存在于该路径下。
  • 权限设置：确保H5页面有权限访问该字体文件。可以在HarmonyOS的权限管理中为Web组件授予相应的文件访问权限。
  • CORS问题：如果H5页面通过HTTP请求加载字体文件，确保服务器配置了正确的CORS（跨域资源共享）策略。
  • 字体格式兼容性：确保字体文件格式（如.ttf、.woff）与H5页面的需求兼容。

如果问题仍未解决，可以尝试将字体文件嵌入到H5页面的CSS中，或者通过Base64编码的方式直接嵌入到HTML中。

回到顶部