HarmonyOS鸿蒙Next Sans 字体在 Web 的使用

HarmonyOS鸿蒙Next Sans 字体在 Web 的使用 目前下载 HarmonyOS Sans 字体后， TTF 源文件是 8MB 左右，在前端网页直接使用还是有些欠妥。

想咨询下：

  1. 是否可以针对 TTF 使用常用字进行拆包后再使用
  2. 是否可以把 TTF 压缩成 WOFF2 字体文件后再使用

谢谢~

1 回复

更多关于HarmonyOS鸿蒙Next Sans 字体在 Web 的使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


要在 Web 中使用 HarmonyOS 鸿蒙 Next Sans 字体，可以通过以下步骤实现：

  1. 下载字体文件：从华为开发者网站或官方渠道获取 Next Sans 字体的 .woff 或 .woff2 格式文件。

  2. 上传字体文件：将字体文件上传到你的服务器或使用 CDN 托管。

  3. 定义 [@font-face](/user/font-face)：在 CSS 中定义 [@font-face](/user/font-face) 规则，指定字体文件的路径和格式。

    [@font-face](/user/font-face) {
    font-family: 'Next Sans';
    src: url('path/to/NextSans.woff2') format('woff2'),
         url('path/to/NextSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

  4. 应用字体：在 CSS 中使用 font-family 属性将 Next Sans 字体应用到所需的元素。

    body {
    font-family: 'Next Sans', sans-serif;
}

  5. 优化加载：使用 font-display: swap; 确保字体加载时文本可见，避免布局偏移。

    [@font-face](/user/font-face) {
    font-family: 'Next Sans';
    src: url('path/to/NextSans.woff2') format('woff2'),
         url('path/to/NextSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

通过这些步骤，你可以在 Web 项目中成功使用 HarmonyOS 鸿蒙 Next Sans 字体。

回到顶部