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

  • woff2：W3C标准，但是不兼容IE，推荐。
     

    使用方法

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

2种使用方式
全局替换

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

自定义

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

全局替换使用说明 

接口地址：https://api.tiax.cn/font/
拼接参数：?id=(字体名称,名称见下方字体列表的参数名)
例子：<link href="https://api.tiax.cn/font/?id=OPPOSans" rel="stylesheet">

自定义使用说明 

接口地址：https://api.tiax.cn/font/
拼接参数：?id=(字体名称,名称见下方字体列表的参数名)-without
例子：<link href="https://api.tiax.cn/font/?id=OPPOSans-without" rel="stylesheet">
带了 -without 参数后.就需要自定义 CSS 类名去选择需要替换的字体. -without 参数默认是只加载字体文件.

使用示例如下;
引入的时候添加 -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>

handsome用户

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

其他博客或网站

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

 

其他说明

字体文件第一次加载需要几秒时间，网络支持QUIC，支持PJAX和AJAX方法，精力有限，没有挨个测试，如发现接口无资源请留言，字体收录如下，都是免费并可商用的，无版权风险，如果有想要的字体可以留言，后续慢慢增加~

字体列表

HarmonyOS(官方字体G了.建议换MiSans)

华为官方发布的一款鸿蒙系统定制字体，取名为HarmonyOS Sans它是免费商用的字体，支持多语言的无级可变字体，包含了简繁中文、拉丁、西里尔、希腊、阿拉伯等5大书写系统，而且支持105种语言

#字体参数名
`HarmonyOS`

#自定义引入的字体名称
'HarmonyOSHans-Medium'

OPPO Sans

根据OPPO官方介绍，OPPO Sans字体定位为全球化品牌字体，共覆盖21个国家语言，共11个语种，中文部分由汉仪字库字体设计总监朱志伟指导，字体设计师黄珍元设计完成，西文部分则由美国Pentagram五角公司设计，汉仪字库西文项目组协作完成。

#字体参数名
`OPPOSans`

#自定义引入的字体名称
'OPPOSans'

霞鹜新晰黑

「霞鹜新晰黑」是一款衍生于 IPAex ゴシック的简体中文黑体字型。这是一款基于 IPAex 黑体的中文开源字体，是将日本写法的字体改造成简体中文写法的尝试。本字体尝试在 IPAex 黑体和霞鹜晰黑原有字形的基础上，将其改造成中国大陆的标准字形，更加适合中国大陆用户的需求。

#字体参数名
`LXGWNewClearGothic`

#自定义引入的字体名称
'LXGWNewClearGothic-Book'

站酷文艺体

「站酷文艺体」设计新颖，尤其在笔画的处理上别出心裁，通过字形、细节的变化让整体视觉呈现简洁有力、清新淡雅的效果。笔画减少或去掉了弧度，相应进行直角或者圆角的变化处理，使字体几何感增强，突出了简洁的字体有力的字体特点。

#字体参数名
`ZhanKuWenYiTi`

#自定义引入的字体名称
'ZhanKuWenYiTi-2'

优设好身体

与《优设标题黑》沉稳有力兼具速度感的思路不同，《优设好身体》的整体气质偏向圆柔纤细，设计上更加富有亲和力和现代感，2 套字体互为补充，可以覆盖绝大多数的设计场景。以圆体字形为基础，通过瘦高的字面，偏向几何的曲线，让字体具有亲和力和时尚感。

#字体参数名
`YouSheHaoShenTi`

#自定义引入的字体名称
'YSHaoShenTi-2'

摩登小方体

「摩登小方体」将笔画进行几何化处理，减少字体的弧形笔画，并将玩去的弧度改为尖锐的折角，这使字体更加方正锐利，特点鲜明。该字体笔画粗细适中且较为相同，在运笔的过程中，宽度逐渐有细微的变化，是的字体在锐利之中更加稳重有力，不会枯燥单调，也让字体更具辨识度

#字体参数名
`MOdengfangti`

#自定义引入的字体名称
'MOdengfangti'

汉仪唐美人(有风险，下架了)

“三月三日天气新,长安水边多丽人。态浓意远淑且真,肌理细腻骨肉匀。”一首《丽人行》写出了盛唐女子的那种明丽又秀美的气质。对于唐代丽人的风度韵致之美,汉仪字库通过一款带有书写韵味的家族字体——汉仪唐美人字体,展`现了唐代不同时期丽人的神韵之美,蕴含了初唐的清秀、娴雅,盛唐的丰丽和晚唐的舒展。

#字体参数名
`Hanyitangmeire`

#自定义引入的字体名称
'hanyi'

荆南麦圆体

荆南字坊麦圆体的设计灵感来源于韩国的一个综艺节目上的谚文字体，手写的风格圆润的笔画让这款字体看起来很可爱。麦圆体萌系可爱的手写风格，字体每个笔画的粗细相同，两端圆润饱满，凸显可爱风格。虽是手写字体，笔画分明没有细小的连接，使字体更加清新俏皮。无论是做食品类还是母婴类，抑或是儿童类的设计都特别适合。

#字体参数名
`JingNanMaiYuanTi`

#自定义引入的字体名称
'Kingnam-Maiyuan-2'

素材集市康康体

距离素材集市康康体1.0版本首次发布，已经过去了近两年，发布至今获得各界朋友的喜爱，在2021最后一天，终于迎来素材集市康康体3.0完整版。3.0版本由字集团队成员 时光羊 独立完成，用了近6个月时间，在1.0版基础上增加5131个字补齐GB2312-80编码字库，目前汉字和字符共计7754个

#字体参数名
`SuCaiJiShiKangKangTi`

#自定义引入的字体名称
'SuCaiJiShiKangKangTi-2'

KF手写体

「 KF手写体 」这款字体，虽然这款字体是日文字型，不过也有很多的汉字，日文字型越来越受大家的喜爱，我想应该就是有支持部分汉字的原因， 「 KF手写体 」这款是属于手写风格，整体的感觉相当相当的可爱，重点是这款字型除了个人免费使用之外，也可以商业使用。

#字体参数名
`KFShouXieTi`

#自定义引入的字体名称
'KFShouXieTi-2'

思源宋体

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

#字体参数名
`NotoSerifSC`

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

Ma Shan Zheng

This script is reminiscent of fonts used to display "yinglian," the short poems and blessings traditionally posted on either side of the entryway to a home or temple. MaShanZheng is heavy and majestic, vital and expansive.

#字体参数名
`ZhanKuWenYiTi`

#自定义引入的字体名称
'Ma Shan Zheng'

About ZCOOL KuaiLe

ZCool Kuaile was created by a team of font design trainees under the leadership of typographer Liu Bingke. First, Liu created the character shape framework and design standards; then, a group of over 100 typography apprentices participated in building out the character set. Finally, Liu and other designers from his workshop, including Yang Kang and Wu Shaojie, edited and adjusted the characters to unify the design.

#字体参数名
`ZhanKuWenYiTi``

#自定义引入的字体名称
'ZCOOL KuaiLe'

MiSans

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

#字体参数名
`MiSans`

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

阿里妈妈东方大楷(有风险，下架了)

阿里妈妈东方大楷是基于颜真卿的多宝塔碑算法生成并结合人力完成的一套字库，机器学习到了颜体的丰腴厚重之感，在笔画的描摹上做到了传统书法的收放起伏，规范了骨架、笔画，还原了书法中的落笔、转笔、藏锋、护尾等书写韵味，使整体更饱满、圆融、浑厚。阿里妈妈东方大楷为中文简体字库，收纳的中文字符包括但不限于GB2312，共计6763个汉字；英文大小写（含全角、半角、合体字等）共105个；常用标点符号共175个，总计7043个字符。

#字体参数名
`Alimama_DongFangDaKai`

 

常见问题

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添加，如下代码所示；
.bg-light .lter, .bg-light.lter {             #标题CSS类名
    font-family: 'Noto Serif SC';          #字体名称
}
#post-content {                            #正文CSS类名
    font-family: 'HarmonyOSHans-Medium';   #字体名称
}

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

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

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