最近部署了 Komari 监控探针面版,想搞一搞美化,主题用的 PurCarte 透明磨砂,感觉还不错,之后想设置一下字体美化,但是并没有找到字体相关的设置项,经过站内搜索发现可以使用 Komari 面板的自定义头部代码功能,用于更换字体美化。

由于本人是小白,以下内容是查询 AI、站内搜索得来的,出现其他稀奇古怪的问题我也不知道怎么解决 ,嘿嘿……

登录 Komari 面板后台,导航到设置:设置 > 站点 > 自定义 > 自定义头部。

在线字体版本

注意:以下字体不可做商业用途。

模板:

<link rel="stylesheet" href="在线字体链接"><style>* { font-family: '名称', sans-serif !important; }</style>

更换字体链接后要更改名称,名称可随意,不然可能因为浏览器的缓存看不到生效效果。改了也不生效可能是链接失效了(用开发者工具看一下),换一个试试。

在线字体举例分享:

1.MiSans

<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700"><style>* { font-family: 'MiSans', sans-serif !important; }</style>

2.优设标题

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap"><style>* { font-family: 'Ma Shan Zheng', cursive !important; }</style>

3.霞鹜文楷

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@400;700&display=swap"><style>* { font-family: 'LXGW WenKai TC', sans-serif !important; }</style>

关于获取 font-family + 链接的方法,可以用 Google Fonts。打开网址,选择或搜索你喜欢的字体,点击字体→点右上角 Get font (获取字体)→点右上角 Get embed code (获取嵌入代码)

网址:https://fonts.google.com/

本地自定义字体版本

注意:以下字体不可做商业用途。

模板:

<style>@font-face {    font-family: '修改名称';    src: url('请自行修改路径') format('woff2');    font-display: swap;}*{font-family:'修改名称',sans-serif !important;}</style>

将字体文件上传到主题文件夹的/assets文件夹内,可直接存放,或者创建一个字体文件夹集中存放,免得以后找不到。我使用的是 PurCarte 主题,路径举例:

脚本安装路径:/opt/komari/data/theme/PurCarte/dist/assets/fonts/Hanyijiangjun.woff2docker安装路径:/root/data/theme/PurCarte/dist/assets/fonts/Hanyijiangjun.woff2

注意:填入路径时将/assets文件夹前面的都去掉,不然不会生效。

本地字体举例分享:

1.汉仪将军

<style>@font-face {    font-family: 'Hanyijiangjun';    src: url('/assets/fonts/Hanyijiangjun.woff2') format('woff2');    font-display: swap;}*{font-family:'Hanyijiangjun',sans-serif !important;}</style>

2.汉仪欢楷

<style>@font-face {    font-family: 'Hanyihuankai';    src: url('/assets/fonts/Hanyihuankai.woff2') format('woff2');    font-display: swap;}*{font-family:'Hanyihuankai',sans-serif !important;}</style>

3.阿里东方大楷

<style>@font-face {    font-family: 'Dongfangdakai';    src: url('/assets/fonts/Dongfangdakai.woff2') format('woff2');    font-display: swap;}*{font-family:'Dongfangdakai',sans-serif !important;}</style>

动漫图片循环:https://api.tomys.top/api/acgimg

可将字体转换为woff2格式缩小体积,ttf转woff2:https://cloudconvert.com/ttf-to-woff2