Komari Monitor修改前端展示字体

 

首先 参考Nodeseek此文章进行修改
根据我自己的喜好使用了Google Sans+Apple苹方

https://www.nodeseek.com/post-490522-1

设置/站点/自定义头部中添加以下
*使用了Google Gemini进行编写

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;700&display=swap">

<style>
  /* 
    为本地的苹方字体定义 @font-face 规则
    我们将定义“常规”和“中粗”两种字重
  */

  /* --- 常规体 (font-weight: 400) --- */
  @font-face {
    font-family: 'PingFang SC'; /* 给字体家族统一命名 */
    src: url('/assets/fonts/PingFangSC-Regular.otf') format('otf'); /* 字体文件路径 */
    font-weight: 400; /* 对应常规体 */
    font-style: normal;
    font-display: swap; /* 优化加载体验 */
  }

  /* --- 中粗体 (font-weight: 600 or 'bold') --- */
  @font-face {
    font-family: 'PingFang SC';
    src: url('/assets/fonts/PingFangSC-Semibold.otf') format('otf'); /* 注意这是另一个字体文件 */
    font-weight: 600; /* 对应中粗体，用于标题或加粗文本 */
    font-style: normal;
    font-display: swap;
  }

  * {
    font-family: 'Google Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  }
</style>

以下为本地字体路径

脚本安装路径：/opt/komari/data/theme/PurCarte/dist/assets/fonts/
Docker安装路径：/root/data/theme/PurCarte/dist/assets/fonts/
填入路径时将/assets前面的去掉

Apple苹方字体下载

https://github.com/ZWolken/PingFang