HarmonyOS鸿蒙Next中web标签怎么加载字体包

HarmonyOS鸿蒙Next中web标签怎么加载字体包 如题 就是web标签加载了vue的html 我现在试了下 @font-face { font-family: PingFangSC-Medium; src: url(‘fonts/meiju_app_iconfont.ttf’); } 也是不行 还有什么别的办法呢？

cke_917.png


更多关于HarmonyOS鸿蒙Next中web标签怎么加载字体包的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

楼主的字体是放在沙箱里面用这种方法试一下：

@font-face {
  font-family: 'PingFangSC-Medium';
  src: url('file:///data/storage/el2/base/haps/entry/files/fonts/meiju_app_iconfont.ttf');
}

更多关于HarmonyOS鸿蒙Next中web标签怎么加载字体包的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


对 华为的老师也建议这样处理，

是的 这样都是在啥箱内操作，路径明确Web层能够获取到，

你好 请问怎么发图片 我想咨询一下，

将字体包（如.ttf文件）存放在工程的rawfile目录下，建立fonts子目录统一管理。CSS路径处理：

@font-face {
  font-family: 'PingFangSC-Medium';
  /* 使用绝对路径指向rawfile目录 */
  src: url('/fonts/meiju_app_iconfont.ttf');
}

请问有没有报错信息，html文件与字体包的路径信息是否正确，可以提供一个复现问题的demo，方便定位问题，感谢支持与理解。

我可能是明白你的意思，就是我html页面进行访问font 字体的时候访问不到。

html 加载的字体，按照web 开发，你的字体应该是要根据html页面所在位置进行目录确定。

这个html 页面虽然在整个鸿蒙项目内，但是他属于独立的，建议在项目外创建目录调试好html，然后将整个文件夹放入鸿蒙项目内

在HarmonyOS Next中，使用<web>标签加载字体包，可通过CSS的@font-face规则实现。将字体文件（如.woff、.ttf）放入应用的resources/base/media目录。在HTML或CSS文件中，使用相对路径引用字体资源，并定义font-family。Web组件会自动加载并应用该字体。

在HarmonyOS Next中，通过Web组件加载的Vue页面或HTML内容，其字体加载方式与标准Web开发基本一致，但需要注意资源路径和访问权限。

根据您提供的代码片段，@font-face规则本身是正确的。问题通常出在字体文件的路径或文件访问权限上。

核心解决方案：

  1. 确认字体文件路径与存放位置

    • 绝对路径：确保src: url('fonts/meiju_app_iconfont.ttf');中的路径相对于您Web页面（HTML）的位置是准确的。
    • 资源目录：在HarmonyOS应用开发中，Web组件加载的本地HTML文件及其资源（如图片、字体）通常需要放在应用的resources/rawfile目录下。请检查您的字体文件是否已正确放置于此。
      • 例如，如果您的HTML文件在rawfile根目录，字体文件在rawfile/fonts/下，那么src属性写为url('fonts/meiju_app_iconfont.ttf')是正确的。
      • 如果目录层级不同，请相应调整路径。

  2. 检查字体文件格式与引用

    • 格式兼容性：虽然.ttf格式的字体支持广泛，但为了更好的兼容性，建议提供多种字体格式（如.woff2, .woff），并使用src属性按优先级列出。
    • 示例代码：
      @font-face {
  font-family: 'PingFangSC-Medium';
  src: url('fonts/meiju_app_iconfont.woff2') format('woff2'),
       url('fonts/meiju_app_iconfont.woff') format('woff'),
       url('fonts/meiju_app_iconfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
    • 字体家族名：确保在CSS中其他地方使用该字体时，font-family的名称与@font-face中定义的完全一致（例如：font-family: 'PingFangSC-Medium';）。

  3. 排查Web组件的资源加载能力

    • 加载本地页面：如果您通过Web组件加载的是打包在应用内的本地页面（例如：$rawfile('index.html')），则上述基于相对路径的字体引用方式应该有效。
    • 加载网络页面：如果加载的是远程URL，则字体文件也需要部署在对应的服务器上，并确保其URL可公开访问且CORS策略允许加载。

调试建议：

  • 在浏览器的开发者工具（如果是从远程加载）或通过Web组件的调试功能中，查看网络（Network） 面板，确认字体文件的请求是否成功发出，以及返回的状态码（应为200）。如果请求失败（404表示路径错误，403表示权限问题），则需根据错误信息调整。
  • 检查控制台是否有关于字体加载的CSS错误或安全策略错误。

总结：请首先重点检查字体文件是否存在于resources/rawfile下的正确子目录中，以及CSS中url()指定的相对路径是否能正确映射到该文件位置。这是HarmonyOS Next的Web组件加载本地资源时最常见的问题。

回到顶部