写在开头

最近美化主题的时候看到后多博主大佬们的字体都是自定义的，蛮好看的，正好华为放出了鸿蒙系统的字体，正好换上。

显示预览

华为鸿蒙字体 「HarmonyOS Sans」是华为专为鸿蒙操作系统定制设计的一款全新中英文字体，特点是易读性强，字型简约富有科技感，在各种不同尺寸的屏幕上都能获得清晰的显示效果，既适合用于设计制作、平面印刷，也可用于阅读，显示大量文字也依然干净清爽。

具体步骤

  • 在butterfly主题source文件夹下新建文件夹font，将下载好的字体文件放到font文件夹里。
  • 在source/css文件夹里面新建font.css文件，写入字体文件内容：
    1
    2
    3
    4
    5
    6
    7
    8
    @font-face{
        font-family: 'HarmonyOS_Sans_Regular';
        font-display: swap;
        src: url('../font/HarmonyOS_Sans_Regular.ttf') format("truetype"); 
    }
    body {
        font-family: 'HarmonyOS_Sans_Regular';
    }
  • 在主题配置文件里inject处添加引用信息：
    1
    - <link rel="stylesheet" href="/css/font.css">
  • 修改配置文件中关于字体的设置：
    1
    2
    3
    4
    5
    font:
    global-font-size:
    code-font-size:
    font-family: HarmonyOS_Sans_Regular
    code-font-family: HarmonyOS_Sans_Regular
  • 可以在font文件夹里面放多个字体，分别应用即可。