HarmonyOS 鸿蒙Next中html如何引用自定义字体

HarmonyOS 鸿蒙Next中html如何引用自定义字体

<!DOCTYPE html>
<html>
<head>
    <TITLE></TITLE>
    <meta charset="utf-8">
    <style>
        @font-face {
            font-family: 'UbuntuMono';
            src: url('/fonts/UbuntuMono-R.ttf');
        }
        pre{
          color : white;
          font-size : 60px;
          font-family: 'UbuntuMono', monospace;
        }
    </style>
</head>
<body class="body">
<pre>{BILLCONTENT}</pre>
</body>
</html>

这样写一直不生效，请问哪里有问题，路径该如何书写。

目录结构如下

cke_1256.jpeg


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

8 回复

开发者你好，我这边使用IDE6.0.0.748，API17，样机Pura 70Pro（5.1.0.150）按照您提供的代码设置自定义字体，是生效的。正常web中也是可以按照这个方法完成自定义字体的设置的。

如果您这边不生效，是否方便提供以下信息方便复现分析：

  1. 自定义字体文件（可放置zip包中）

  2. IDE版本号（Help —— About DevEco Studio 查看）

  3. 样机版本号 （设置——关于样机查看，可直接提供对应页截图）

  4. 运行的工程API版本号

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


介绍：

自定义字体是指开发者根据应用需求创建或选择的字体，通常用于实现特定的文字风格或满足独特的设计要求。当应用需要使用特定的文本样式和字符集时，可以注册并使用自定义字体进行文本渲染。

原理：

自定义字体的注册是指将字体文件（如ttf、otf文件等）从应用资源注册到系统中，使得应用能够使用这些字体进行文本渲染。注册过程是将字体文件通过字体管理接口注册到系统字体库中，以便在应用中进行调用。

Tip：

建议把字体先直接放在rawfile目录下，不要在font试试下，行的通的话再试试放在font下再进行下一步尝试

1、先在全局注册一下字体

import { text } from '@kit.ArkGraphics2D'
// 注册自定义字体
let fontCollection = text.FontCollection.getGlobalInstance()

// 字体文件放在本应用工程的entry/src/main/resources/rawfile目录
fontCollection.loadFontSync('UbuntuMonoR',$rawfile('UbuntuMono-R.ttf'))

换成这个路径试试

url('./UbuntuMono-R.ttf');

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

【背景知识】

Web：提供具有网页显示能力的Web组件，@ohos.web.webview提供Web控制能力。

【参考方案】

可参考H5页面加载自定义字体库示例，通过Web组件构建HTML页面加载自定义字体库的场景，支持动态加载字体库，点击字体切换按钮可切换字体样式。

  1. 通过getRawFileList加载rawfile目录下的字体文件。
let context = this.getUIContext().getHostContext();
context!.resourceManager.getRawFileList('', (error: BusinessError, value: Array<string>) => {
  if (error != null) {
    return;
  }
  for (let i = 0; i < value.length; i++) {
    if (!value[i].endsWith('.ttf')) {
      continue;
    }
    let fontName = value[i].split('.')[0]
    let fontUrl = './' + value[i]
    this.fontFamilies.push(new FontFamily(fontName, fontUrl));
  }
})
  1. 通过runJavaScript传递JavaScript代码的功能，实现字体的按需动态加载和切换。
// 首先加载字体
if (!fontFamily.isLoaded) {
   let fontLoad = `function loadNewFont() {
                     const font = new FontFace('${fontFamily.fontName}', 'url(${fontFamily.fontUrl})');
                     font.load().then(function() {document.fonts.add(font)});}`
   this.controller.runJavaScript(fontLoad)
   this.controller.runJavaScript('fontLoadCaller()')
   fontFamily.isLoaded = true
}

// 字体文件加载完成后执行字体切换
let changeFont = `function changeFont(){
                    document.getElementById('news-text').style.fontFamily = '${fontFamily.fontName}';
                    document.getElementById('news-title').style.fontFamily = '${fontFamily.fontName}';
                    document.getElementById('news-time').style.fontFamily = '${fontFamily.fontName}';}`
this.controller.runJavaScript(changeFont)
this.controller.runJavaScript('fontChangeCaller()')

背景知识：

楼主我尝试用你的代码来加载字体，确实存在不加载自定义字体的问题。不过我在浏览器上调试了一下，直接在标签内部写入自定义字体是生效的。

问题解决：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <TITLE></TITLE>
    <meta charset="utf-8">
    <style>
        /* 引入字体 */
        @font-face {
            font-family: 'MyCustomFont'; /* 自定义字体的名称 */
            src: url('fonts/test.ttf') format('truetype')
        }
        .pre{
          color : black;
          font-family: 'MyCustomFont';
        }
    </style>
</head>
<body class="body">
<!-- 直接在标签内部使用样式可以生效 -->
<div style="font-family: 'MyCustomFont';">BILLCONTENT The</div>
<div>The</div>
</body>
</html>

字体目录如下：

cke_15723.png

真机演示：

cke_21421.png

  1. 字体管理中注册自定义字体。

  2. 设置对应文本的fontFamily。可参考如下代码：

// xxx.ets 
import { font } from '@kit.ArkUI'; 

@Entry 
@Component 
struct FontExample { 
  @State message: string = 'Hello World'; 

  aboutToAppear() { 
    // 注册黑色字体 
    font.registerFont({ 
      familyName: 'Condensed_Black', // 注册的字体名称 
      familySrc: '/font/Sans_Condensed_Black.ttf' // font文件夹与pages目录同级 
    }) 

    // 注册黑色斜字体 
    font.registerFont({ 
      familyName: 'Condensed_Black_Italic', // 注册的字体名称 
      familySrc: '/font/Sans_Condensed_Black_Italic.ttf' // font文件夹与pages目录同级 
    }) 
  } 

  build() { 
    Column() { 
      Text(this.message) 
        .align(Alignment.Center) 
        .fontSize(50) 
        .fontFamily('Condensed_Black') // 使用黑色字体 
      Text(this.message) 
        .align(Alignment.Center) 
        .fontSize(50) 
        .fontFamily('Condensed_Black_Italic') // 使用黑色斜字体 
      Text(this.message) 
        .align(Alignment.Center) 
        .fontSize(50) 
    } 
    .width('100%') 
    .margin({ top: 30 }) 
  } 
}

效果图如下：

图片

在HarmonyOS Next中，通过CSS的@font-face规则引用自定义字体。首先将字体文件（如.otf或.ttf格式）放入项目的resources/base/media目录。在CSS文件中定义字体族名称和文件路径，例如：

@font-face {
  font-family: 'MyFont';
  src: url('/media/MyFont.otf');
}

然后在样式表中通过font-family: 'MyFont'应用该字体。确保字体文件格式兼容，路径引用正确。

在HarmonyOS Next中，HTML页面引用自定义字体需要注意资源路径的配置方式。根据您提供的目录结构，字体文件位于entry/src/main/resources/base/media/fonts/目录下。

正确的路径写法应该是：

@font-face {
    font-family: 'UbuntuMono';
    src: url('../../media/fonts/UbuntuMono-R.ttf');
}

关键点说明：

  1. 在HarmonyOS中，HTML文件默认从entry/src/main/resources/base/profile/目录加载
  2. 使用相对路径../../media/fonts/向上两级目录后进入media/fonts文件夹
  3. 确保字体文件UbuntuMono-R.ttf确实存在于指定目录
  4. 字体格式支持TTF、OTF等常见格式

如果仍然不生效，请检查：

  • 字体文件是否完整且未被损坏
  • 文件权限设置是否正确
  • 在DevEco Studio中重新构建项目以确保资源被正确打包
回到顶部