问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HarmonyOS web组件将本地三方字体文件绝度路径传给H5使用时未能生效？

头像
HarmonyOS码上奇行
    12.2k16317

    字体绝对路径：file:///data/storage/el2/base/haps/entry/cache/xky\_font\_title.ttf

    截图中的模版news\_detail.html文件H5可以使用，但是三方字体H5就未生效

    示例代码：

    @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}('./xky_font_title.ttf')`
          // javaScriptStr = `${JavaScriptProxyConstant.changTitleFont}('xky_font_title.ttf')`
          this.controller.runJavaScript(javaScriptStr)
        }, 3*1000)
      })
  }
}
    HarmonyOSharmonyosharmonyos-next
    阅读 493
    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12.2k16317

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

      把字体放在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%')
  }
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题