HarmonyOS 鸿蒙Next 自定义字体没有效果

注册自定义字体有如下三种方式配置

前置条件：

1.导入模块

import font from '[@ohos](/user/ohos).font'

2.俩个必须文件：xxx.ttf 和xxx.otf（例如：HarmonyOS_Sans_Thin.ttf、THSJinRongTi_Bold.otf）

场景一：familyName和familySrc都支持string

操作步骤：

1.在src\main\ets\路径下新建一个目录：font，将前置条件中的俩个文件全都放入到这个font目录中；

2.配置下方内容：

aboutToAppear() {
font.registerFont({
familyName: <span class="hljs-string">'medium'</span>, <span class="hljs-comment">//命名名字随机</span>

familySrc: <span class="hljs-string">'/font/xxx.ttf'</span> <span class="hljs-comment">// 按照左边命名格式填写 &nbsp;</span>
})
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

3.在布局中使用时，按照以下格式使用即可   

Text(“第一种格式”)

      .fontSize(30)<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

场景二：familyName和familySrc都支持系统Resource

操作步骤：

1.与场景一的步骤1相同；

2.配置以下内容：

aboutToAppear() {

font.registerFont({
familyName: $r(<span class="hljs-string">'app.string.mediumFamilyName'</span>), <span class="hljs-comment">//设置注册的字体名称，命名按照app.string.XXX来命名即可</span>

familySrc: $r(<span class="hljs-string">'app.string.mediumFamilySrc'</span>) &nbsp; &nbsp;<span class="hljs-comment">//设置注册字体文件的路径，命名同上，app.string.XXX切勿相同</span>
})
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

3.配置文件：需要在以下三个路径下的string.json中添加以下配置：

 src/main/resources/base/element 、src/main/resources/en_US/element、src/main/resources/zh_CN/element

注意：以下内容全都需要添加到string.json中

{

“name”:
“mediumFamilyName”, //name后跟的是familyName的根路径名称
“value”:
“name” //value后跟的name随机写，无硬性要求
}
{
“name”:
“mediumFamilySrc”, //name后跟的是familySrc的根路径名称
“value”:
“/font/THSJinRongTi_Bold.otf” //value后跟的是xxx.otf的路径
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

4.在布局中使用，按照以下方式来使用   

Text(this.message)
.fontSize(20)
.fontFamily($r(‘app.string.mediumFamilyName’)) //注册的字体名称放入即可<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

场景三：familySrc支持RawFile

操作步骤：

 1.在src/main/resources/rawfile路径下将前置条件中的俩个必须文件全都添加进去

 2.配置以下内容：

aboutToAppear() {

      font.registerFont({
          familyName: ‘mediumRawFile’,                                     //设置注册的字体名称
          familySrc: $rawfile(‘font/THSJinRongTi_Bold.otf’)        //设置注册字体文件的路径，将xxx.otf路径按左边方式放入
      }）
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

 3.在布局中使用，按照以下方式来使用       

Text(this.message)

          .fontSize(20)
          .fontFamily(“mediumRawFile”)   //注册的字体名称放入即可<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

当前的注册自定义字体都是需要放置到本地，再通过代码去加载字体；暂时无法实现动态加载

参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-font-V5#fontregisterfont