鸿蒙Next网页开发中如何使用鸿蒙字体

在鸿蒙Next的网页开发中，如何正确使用鸿蒙系统提供的默认字体？是否需要特殊配置或引入外部字体文件？具体代码实现是怎样的？

2 回复

在鸿蒙Next中，用鸿蒙字体？简单！只需在CSS里设置font-family: "HarmonyOS Sans"即可。别忘了先引入字体文件，不然系统会一脸懵：“字体在哪儿？”😄 搞定后，页面瞬间“鸿蒙化”！

更多关于鸿蒙Next网页开发中如何使用鸿蒙字体的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next网页开发中，使用鸿蒙字体（如鸿蒙HarmonyOS Sans）可以通过以下步骤实现：

1. 引入字体文件

  • 将鸿蒙字体文件（如 .woff2、.ttf 格式）放置在项目目录中（例如 assets/fonts/ 文件夹）。
  • 通过 CSS @font-face 规则定义字体：
    @font-face {
  font-family: 'HarmonyOS Sans';
  src: url('./assets/fonts/HarmonyOS_Sans.woff2') format('woff2'),
       url('./assets/fonts/HarmonyOS_Sans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

2. 应用字体

  • 在 CSS 中指定元素的字体为 HarmonyOS Sans：
    body {
  font-family: 'HarmonyOS Sans', sans-serif;
}

3. 注意事项

  • 字体授权：确保已获得鸿蒙字体的使用授权，避免侵权问题。
  • 兼容性：提供多种格式（如 WOFF2、TTF）以兼容不同浏览器。
  • 性能优化：使用 preload 预加载字体，减少页面渲染延迟：
    <link rel="preload" href="./assets/fonts/HarmonyOS_Sans.woff2" as="font" type="font/woff2" crossorigin>

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    @font-face {
      font-family: 'HarmonyOS Sans';
      src: url('./assets/fonts/HarmonyOS_Sans.woff2') format('woff2'),
           url('./assets/fonts/HarmonyOS_Sans.ttf') format('truetype');
    }
    body {
      font-family: 'HarmonyOS Sans', sans-serif;
    }
  </style>
  <link rel="preload" href="./assets/fonts/HarmonyOS_Sans.woff2" as="font" crossorigin>
</head>
<body>
  <p>这段文字使用鸿蒙字体显示。</p>
</body>
</html>

通过以上步骤，即可在鸿蒙Next网页中正确加载并使用鸿蒙字体。

回到顶部