最近看见好多博客都改成了个性化字体显示，主题自带的字体阅读起来感觉不是特别好，所以自己搞搞咯

背景介绍

​ 早期电脑显示的字体都是点阵字体，通过像素点标记字符，这种方式节省电脑运算量，但显示效果差，字体一旦放大就出现锯齿甚至马赛克问题。1980年代中期，苹果公司推出 Macintosh 电脑（Mac系列早期型号），在文字处理上使用新的矢量字体取代点阵字体，在文字显示效果上独领风骚。为了支持矢量字体，苹果定义了一套标准的字体数据结构格式：SFNT[1]。平滑的字体技术加上独立设计的新字体，也成为 Macintosh 畅销的卖点之一。

SFNT 发布后，Adobe公司紧接着发布了 Type 1 PostScript 字体，通过与 PostScript 系列工具的整合抢占市场。为了对抗 Adobe 的 PostScript，苹果设计开发了 TrueType 字体，后来微软也加入了 TrueType 的开发。事情后来的发展违背了苹果的预期，微软成功的把 TrueType 全面集成到 Windows3.1 中，而 Macintosh 电脑上却是 PostScript 成为主导字体。

  • 1991年，微软与 Monotype 公司合作，制作了一批高质量 TrueType 字体，同时兼容PostScript字体集成进 Windows。
  • 1994年，微软开发了 TrueType Open “智能字体”技术。
  • TrueType字体文件后缀名（*.ttf）
  • 1996年，Adobe公司加入 TrueType Open 的开发，随后 TrueType Open 与 Adobe Type 1 合并并成立新项目：OpenType。

OpenType字体文件后缀名（*.otf）

  • 1997年，微软发布的IE4中支持将压缩后的 OpenType 文件嵌入到浏览器（Embedded OpenType）的技术[4]。这标志这浏览器使用特定字体能力的开始。Embedded OpenType字体文件后缀名（*.eot）
  • 2006年，浏览器纷纷开始支持主流的 OpenType 字体标准。
  • 2007年，OpenType 成为 ISO 标准，以ISO/IEC 14496-22发布。
  • 2008年，W3C委员会拒绝了微软提出的将Embedded OpenType字体作为标准的提案。
  • 2009年，Mozilla 开始测试一种 OpenType 的字体压缩技术：Web Open Font Format（简称WOFF）。同年，Mozilla、Opera、微软共同向W3C提交 WOFF提案。Web Open Font Format字体文件后缀名（*.woff）
  • 2010年，W3C将WOFF发布为草案，并进行推广 。

​ WOFF 压缩格式的2个特点；

​ - 利用压缩技术有效减小文件大小。

​ - 不加密、不受DRM（数字著作权）限制。

  • 2014年，WebFont 工作组发布了 WOFF2 草案。同年，Chrome 38 版本移除了对 SVG 字体的支持。
  • 2018年，WOFF2标准成为 W3C 推荐标准。

 

浏览器字体

目前的字体库主要通过字体工具生成（比如 百度字体工具），并直接使用字体工具提供的CSS引用方法。字体工具为了兼容，会包含不同的字体文件，典型的引用方式如图

CSS引用字体文件

而实际上，考虑到 woff2 在浏览器的兼容性上已经表现的足够好。完全可以只使用 woff2 这一种字体。当然，如果你还要兼容IE，那么还需要使用eot字体。

 

知识结论

  • eot：IE系列专属字体方案，不推荐。
  • svg：不是真的字体，存在很多兼容问题，已经被大部分浏览器抛弃，不推荐。
  • ttf：兼容性好，但是字体文件较大 ，不推荐。
  • woff：W3C标准，兼容性好，推荐。
  • woff2：W3C标准，但是不兼容IE，推荐。

 

字体格式

TTF（TrueType Font）

TrueType是由美国苹果公司和微软公司共同开发的一种电脑轮廓字体（曲线描边字）类型标准。
这种类型字体文件的扩展名是 .ttf，类型代码是tfil。
TrueType的主要强项在于它能给开发者提供关于字体显示、不同字体大小的像素级显示等的高级控制。

 

OTF（OpenType Font）

OpenType 是 Adobe 和 Microsoft 联合开发的跨平台字体文件格式，也叫 Type 2 字体，它的字体格式采用 Unicode 编码，是一种兼容各种语言的字体格式。
OpenType 也是一种轮廓字体，比TrueType 更为强大，并且还支持多个平台，支持很大的字符集，还有版权保护。可以说它是Type 1和 TrueType 的超集。
OpenType标准定义了 OpenType 文件名称的后缀名：

  • 包含 TrueType 字体的 OpenType 文件后缀名为 .ttf。
  • 包含 PostScript 字体的文件后缀名为 .OTF。
  • 如果是包含一系列 TrueType 字体的字体包文件，那么后缀名为.TTC。

OTF 的主要优点有：

  • 增强的跨平台功能；
  • 更好的支持Unicode标准定义的国际字符集；
  • 支持高级印刷控制能力；
  • 生成的文件尺寸更小；
  • 支持在字符集中加入数字签名，保证文件的集成功能。

同一个 OpenType 字体文件可以用于 Mac OS，Windows 和 Linux 系统，这种跨平台的字库非常方便于用户的使用，用户再也不必为不同的系统配制字库而烦恼了。
OTF 的兼容性和 TTF 相同。

 

WOFF（Web Open Font Format）

Web 开放字体格式是一种网页所采用的字体格式标准。此字体格式发展于 2009 年，现在正由万维网联盟的 Web 字体工作小组标准化，以求成为推荐标准。
此字体格式不但能够有效利用压缩来减少档案大小，并且不包含加密也不受 DRM（数位著作权管理）限制。
WOFF 本质上是包含了基于 sfnt 的字体（如 TrueType、OpenType 或开放字体格式），且这些字体均经过 WOFF 的编码工具压缩，以便嵌入网页中。这个字体格式使用zlib压缩，文件大小一般比 TTF 小40%。

 

WOFF2（Web Open Font Format2）

WOFF 2 标准在 WOFF1 的基础上，进一步优化了体积压缩，带宽需求更少，同时可以在移动设备上快速解压。
与 WOFF 1.0 中使用的 Flate 压缩相比，WOFF 2.0 是使用 Brotli 方法进行的压缩，压缩率更高，所以文件体积更小。

  • TTF的兼容性更好，但是其字体文件体积最大。
  • WOFF 字体比 TTF 字体有更小的体积和更好的表现性。
  • WOFF 2 字体是对 WOFF 字体的升级。

 

使用方法

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

2种使用方式
全局替换

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

自定义

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

handsome用户

主题设置 → 开发者设置 → 自定义输出head 头部的HTML代码 中添加即可

 

其他博客或网站

同样的方式，自定义输出head 头部的HTML代码 添加就行了。

 

备注说明

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

 

字体列表

HarmonyOS

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

<link href="https://itggg.cn/font/HarmonyOS/" rel="stylesheet">

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

OPPO Sans

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

<link href="https://itggg.cn/font/OPPOSans/" rel="stylesheet">

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

霞鹜新晰黑

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

<link href="https://itggg.cn/font/LXGWNewClearGothic/" rel="stylesheet">

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

仓耳与墨

本字体基于中华人民共和国 GB2312-80 字符集汉字部分标准，TrueType 格式，共收容汉字 6763 个，英文及标点等常用字符 245 个。「仓耳与墨」含有五个字重，随着笔画粗细的变化，字体笔画的组合和形态都有所改变，整体形态也各不相同，可以互相搭配，应用范围较广。

<link href="https://itggg.cn/font/CEYM/" rel="stylesheet">

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

站酷文艺体

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

<link href="https://itggg.cn/font/ZhanKuWenYiTi/" rel="stylesheet">

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

优设好身体

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

<link href="https://itggg.cn/font/YouSheHaoShenTi/" rel="stylesheet">

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

江西拙楷体

「江西拙楷体」是设计师黄煜臣发布的一套免费可商用字体。该字体由黄煜臣一人手写并制作，共收容字符数 6248 个，字形数 6260 个。这是一套手写楷体，相比电脑中标准化制作的楷体，这套字体每个字的笔画是没有统一标准的，每个笔画都带有一些书写的痕迹，具有手写的自然美感。

<link href="https://itggg.cn/font/jiangxichuokai/" rel="stylesheet">

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

杨任东竹石体

杨任东竹石体是一款可商用的手写字体，字体整体简洁明了，大方，支持中文简体、英文字母、数字符号等格式，适合应用于艺术设计、平面宣传设计、网页设计、书籍印刷等领域。工整秀丽，字母排序井然有序，造就韵律独特的篇章。

<link href="https://itggg.cn/font/YangRenDongZhuShiTi/" rel="stylesheet">

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

摩登小方体

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

<link href="https://itggg.cn/font/MOdengfangti/" rel="stylesheet">

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

汉仪唐美人

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

<link href="https://itggg.cn/font/Hanyitangmeire/" rel="stylesheet">

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

荆南麦圆体

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

<link href="https://itggg.cn/font/JingNanMaiYuanTi/" rel="stylesheet">

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

电影字幕体

电影字幕体(しねきゃぷしょん)是一款漂亮的日系电影字幕样式 免费商用手写风格字体。这款字体发布于2009年，距离现在年代比较久远。这款字体可以免费商用，作者并未放弃版权，因此，禁止修改字体或版权声明。我们放宽了对重新分发的限制，因此您可以自由分发它。您可以随意使用它。但是，作为字体作者，如果您能报告使用情况，我将不胜感激。

<link href="https://itggg.cn/font/DianYingZiMuTi/" rel="stylesheet">

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

素材集市康康体

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

<link href="https://itggg.cn/font/SuCaiJiShiKangKangTi/" rel="stylesheet">

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

KF手写体

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

<link href="https://itggg.cn/font/KFShouXieTi/" rel="stylesheet">

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

甜瓜体

分享一款大家会喜欢的日文字体「 甜瓜体 」（日文名：マメロン），作者说应该叫做哈密瓜体。虽然这是一款日文字体，但是收录超过6,600个字 (JIS第1水准2965字，第2水准3390字) ，相当于很多的中文字，并且样式是非常可爱的，当然也要取决于大家自己的喜好哟！喜欢的话赶紧下载吧！

<link href="https://itggg.cn/font/TianGuaTi-5/" rel="stylesheet">

#自定义引入的字体名称
'Mamelon-5-Hi-Regular-2'

思源宋体

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

<link href="https://itggg.cn/font/NotoSerifSC/" rel="stylesheet">

#可选参数 字体粗细 为700 ，默认为600
<link href="https://itggg.cn/font/NotoSerifSC/font-weight-700" rel="stylesheet">

#自定义引入的字体名称
'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.

<link href="https://itggg.cn/font/MaShanZheng/" rel="stylesheet">

#自定义引入的字体名称
'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.

<link href="https://itggg.cn/font/ZCOOLKuaiLe/" rel="stylesheet">

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

玩艺记趣体(有版权风险，已下架)

玩艺记趣体是一款超可爱的艺术字体，字体样式看起来十分可爱萌萌哒~特别适合用于广告、教育印刷、网页设计、印刷、文本装潢、篆刻制模、排版等文字领域

MiSans

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

# 可选字体粗细 200，300，400，500，600，650
<link href="https://itggg.cn/font/MiSans/font-weight-200/" rel="stylesheet">
<link href="https://itggg.cn/font/MiSans/font-weight-300/" rel="stylesheet">
<link href="https://itggg.cn/font/MiSans/font-weight-400/" rel="stylesheet">
<link href="https://itggg.cn/font/MiSans/font-weight-500/" rel="stylesheet">
<link href="https://itggg.cn/font/MiSans/font-weight-600/" rel="stylesheet">
<link href="https://itggg.cn/font/MiSans/font-weight-650/" rel="stylesheet">

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

 

常见问题

1、自定义要更换的字体怎么弄？比如只换标题字体

  • 引入的时候添加-without参数，例如；
<link href="https://itggg.cn/font/NotoSerifSC-without/" rel="stylesheet">
  • 然后在你博客或网站的自定义CSS添加，如下代码所示；
.index-post-title {              #类名 多个类名用,分隔
    font-family: 'Noto Serif SC'; #字体名称
}

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

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

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

  • 同时引入需要混搭的字体，记得带 -without 参数，例如；想把标题换思源宋体，正文换鸿蒙字体，
<link href="https://itggg.cn/font/NotoSerifSC/font-weight-700-without/" rel="stylesheet"> #引入思源宋体
<link href="https://itggg.cn/font/HarmonyOS-without/" rel="stylesheet"> #引入鸿蒙字体
  • 然后在你博客或网站的自定义CSS添加，如下代码所示；
.bg-light .lter, .bg-light.lter {          #标题CSS类名
    font-family: 'Noto Serif SC';          #字体名称
}
#post-content {                            #正文CSS类名
    font-family: 'HarmonyOSHans-Medium';   #字体名称
}

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

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

Last modification：March 15, 2022
© Allow specification reprint
如果你想请我喝奶茶的话