最近看见好多博客都改成了个性化字体显示，主题自带的字体阅读起来感觉不是特别好，所以自己搞搞咯
  • eot：IE系列专属字体方案，不推荐。
  • svg：不是真的字体，存在很多兼容问题，已经被大部分浏览器抛弃，不推荐。
  • ttf：兼容性好，但是字体文件较大 ，不推荐。
  • woff：W3C标准，兼容性好，推荐。
  • woff2：W3C标准，但是不兼容IE，推荐。
     

使用方法

为了照顾新同学，不会引入字体，也不会 CSS 选择器，直接做成了接口形式，接口可选 2 种方式使用，全部替换或自定义。

2种使用方式
全局替换

直接引入则默认替换所有页面字体

自定义

引入后需要自己手动添加 CSS 类名 ，具体方法见下文 “常见问题“

全局替换使用说明 

<link href="https://api.tiax.cn/font/?id=NotoSerifSC" rel="stylesheet">

说明：NotoSerifSC 是字体名称

handsome用户

主题设置 → 开发者设置 → 自定义输出head 头部的HTML代码中添加即可
<link href="https://api.tiax.cn/font/?id=NotoSerifSC" rel="stylesheet">

其他博客或网站

同样的方式，自定义输出head 头部的HTML代码添加就行了。
<link href="https://api.tiax.cn/font/?id=NotoSerifSC" rel="stylesheet">

自定义使用说明

输出head 头部的HTML代码添加就行了

<link href="https://api.tiax.cn/font/?id=NotoSerifSC-without" rel="stylesheet">

说明：添加 -without 参数后，只加载字体文件，不会自动替换页面字体。需要自定义 CSS 类名来选择需要替换字体的元素。

  • 引入字体（添加 -without 参数）
<link href="https://api.tiax.cn/font/?id=NotoSerifSC-without" rel="stylesheet">
  • 在自定义 CSS 中指定应用字体的类名
<style>
.index-post-title {                /* CSS 类名，多个类名用 . 分隔 */
    font-family: 'Noto Serif SC';  /* 字体名称，名称在字体列表里有 */
}
</style>

字体列表

思源宋体

思源宋体包支持四种不同的东亚语言(简体中文、繁体中文、日文和韩文)，且各有7级字重，其中的每一种都有 65535 个字形，可共同呈现一致的视觉美感。并依照当地语系国家的标准规范，如日文采用日本JIS X 0208及JIS 2004、韩文采用KS X 1001及KS X 1002标准、台湾繁体中文支持Big5并根据中华民国教育部国字标准字体造字、简体中文以中国的GB 18030及通用规范汉字表规范制作。

#字体参数名
`NotoSerifSC`

#自定义引入的字体名称
'Noto Serif SC'

MiSans

MIUI 13 采用全新系统字体 MiSans； 笔型平直有力，设计更加简约，减少视觉负担，更有利于屏幕显示。共包含29,093个字符，支持多种语言。MiSans 提供了多种 OpenType 功能，可根据特定需求来选择不同形态的字符，例如某些标点符号可以根据周围字母的形态自动调整至合适的位置。MiSans字重齐全，层级清晰，10个字重全部开放下载，供全社会免费商用。

#字体参数名
`MiSans`

#此字体不支持 -without 参数，默认都是全局应用

常见问题

1、为什么ifame引入的资源字体没效果？

  • ifame 的资源会有跨域问题，能解决的话那就可以用，或者在源页面上去定义字体。

2、多个字体混搭着用怎么弄？比如标题一种字体，正文一种字体。

同时引入需要混搭的字体，记得带 -without 参数。
示例；想把标题换成思源宋体，正文换成鸿蒙字体：

<!-- 引入思源宋体 -->
<link href="https://api.tiax.cn/font/?id=NotoSerifSC-without" rel="stylesheet">
<!-- 引入鸿蒙字体 -->
<link href="https://api.tiax.cn/font/?id=HarmonyOS-without" rel="stylesheet">

自定义 CSS类名，在博客或网站的自定义 CSS 中添加

/* 标题 */
.bg-light .lter, .bg-light.lter {
    font-family: 'Noto Serif SC';
}

/* 正文 */
#post-content {
    font-family: 'HarmonyOSHans-Medium';
}

3、为什么感觉字体渲染的有点慢？

  • 收录的字体，woff2 压缩后的大小均在 1M~2M 之间，已经无法再小了，只有几个字体稍微大点，2M多，不超过3M。速度问题接口已经尽力优化了，都缓存在CDN 上的，如果您的服务器在境外，可能就稍慢一点了，国内服务器速度几乎还是无感的，除非本地的网络环境也慢，那我就没办法优化了，毕竟字体的体积摆在这里的 ╮(╯▽╰)╭

最后修改：2026 年 04 月 29 日
© 允许规范转载
钥匙你想请我喝酱香拿铁的话！