个性化字体修改

Author：爆胎
发布时间：March 3, 2022
1280 views
36 comments
11758 words
Categories：分享

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

### 背景介绍

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

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

- 1991年，微软与 [Monotype](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.monotype.com%2F) 公司合作，制作了一批高质量 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 推荐标准。

------

&nbsp;

### 浏览器字体

目前的字体库主要通过字体工具生成（比如 [百度字体工具](https://links.jianshu.com/go?to=http%3A%2F%2Ffontstore.baidu.com%2F)），并直接使用字体工具提供的CSS引用方法。字体工具为了兼容，会包含不同的字体文件，典型的引用方式如图

![](https://img-1259793745.itggg.cn/20220307150940.png)

`CSS`引用字体文件

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

&nbsp;

### 知识结论

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

&nbsp;

### 字体格式

#### TTF（TrueType Font）

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

------

&nbsp;
#### 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 相同。

------

&nbsp;
#### WOFF（Web Open Font Format）

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

------

&nbsp;
#### WOFF2（Web Open Font Format2）

WOFF 2 标准在 WOFF1 的基础上，进一步优化了体积压缩，带宽需求更少，同时可以在移动设备上快速解压。
 与 WOFF 1.0 中使用的 Flate 压缩相比，WOFF 2.0 是使用 Brotli 方法进行的压缩，压缩率更高，所以文件体积更小。
- `TTF`的兼容性更好，但是其字体文件体积最大。
- `WOFF` 字体比 TTF 字体有更小的体积和更好的表现性。
- `WOFF 2` 字体是对 `WOFF` 字体的升级。

------

&nbsp;
### 使用方法

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

<div class="panel panel-default  box-shadow-wrap-lg goal-panel">
<div class="panel-heading">
        2种使用方式
    </div>
<div class="padder-md wrapper">     <div class="streamline b-l m-b"><div class="sl-item b- b-l">
                                <div class="m-l">
                                    <div class="text-muted">全局替换</div>
                                    <p>直接引入则默认替换所有字体</p>
                                </div>
                            </div><div class="sl-item b-info b-l">
                                <div class="m-l">
                                    <div class="text-muted">自定义</div>
                                    <p>引入后需要自己手动添加 CSS 类名 ，具体方法见下文 “常见问题“</p>
                                </div>
                            </div></div></div></div>

#### handsome用户

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

------

&nbsp;
#### 其他博客或网站

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

------

&nbsp;
### 备注说明

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

&nbsp;

#### 字体列表
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e110e4aaeb5a59de1a4f2a7adf0230da47" aria-expanded="true"><div class="accordion-toggle"><span>HarmonyOS</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e110e4aaeb5a59de1a4f2a7adf0230da47" class="collapse collapse-content"><p></p>华为官方发布的一款鸿蒙系统定制字体，取名为HarmonyOS Sans它是免费商用的字体，支持多语言的无级可变字体，包含了简繁中文、拉丁、西里尔、希腊、阿拉伯等5大书写系统，而且支持105种语言

![](https://img-1259793745.itggg.cn/20220307150405.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-99f37569ffaf71d8b27a5519e80c42be85" aria-expanded="true"><div class="accordion-toggle"><span>OPPO Sans</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-99f37569ffaf71d8b27a5519e80c42be85" class="collapse collapse-content"><p></p>根据OPPO官方介绍，OPPO Sans字体定位为全球化品牌字体，共覆盖21个国家语言，共11个语种，中文部分由汉仪字库字体设计总监朱志伟指导，字体设计师黄珍元设计完成，西文部分则由美国Pentagram五角公司设计，汉仪字库西文项目组协作完成。

![](https://img-1259793745.itggg.cn/20220307150544.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-022f8b0b23cdf626df8486d96218e0d282" aria-expanded="true"><div class="accordion-toggle"><span>霞鹜新晰黑</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-022f8b0b23cdf626df8486d96218e0d282" class="collapse collapse-content"><p></p>「霞鹜新晰黑」是一款衍生于 IPAex ゴシック的简体中文黑体字型。这是一款基于 IPAex 黑体的中文开源字体，是将日本写法的字体改造成简体中文写法的尝试。本字体尝试在 IPAex 黑体和霞鹜晰黑原有字形的基础上，将其改造成中国大陆的标准字形，更加适合中国大陆用户的需求。

![](https://img-1259793745.itggg.cn/20220307143042.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-73cccce9a45e24437f6d9548e71f68d22" aria-expanded="true"><div class="accordion-toggle"><span>仓耳与墨</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-73cccce9a45e24437f6d9548e71f68d22" class="collapse collapse-content"><p></p>本字体基于中华人民共和国 GB2312-80 字符集汉字部分标准，TrueType 格式，共收容汉字 6763 个，英文及标点等常用字符 245 个。「仓耳与墨」含有五个字重，随着笔画粗细的变化，字体笔画的组合和形态都有所改变，整体形态也各不相同，可以互相搭配，应用范围较广。

![](https://img-1259793745.itggg.cn/20220307143349.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6e6bcf2af7b77cf50643a4dd29e1d4505" aria-expanded="true"><div class="accordion-toggle"><span>站酷文艺体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6e6bcf2af7b77cf50643a4dd29e1d4505" class="collapse collapse-content"><p></p>「站酷文艺体」设计新颖，尤其在笔画的处理上别出心裁，通过字形、细节的变化让整体视觉呈现简洁有力、清新淡雅的效果。笔画减少或去掉了弧度，相应进行直角或者圆角的变化处理，使字体几何感增强，突出了简洁的字体有力的字体特点。

![](https://img-1259793745.itggg.cn/20220307144223.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-660c7f4e4b01b4555354c2e7beb462735" aria-expanded="true"><div class="accordion-toggle"><span>优设好身体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-660c7f4e4b01b4555354c2e7beb462735" class="collapse collapse-content"><p></p>与《优设标题黑》沉稳有力兼具速度感的思路不同，《优设好身体》的整体气质偏向圆柔纤细，设计上更加富有亲和力和现代感，2 套字体互为补充，可以覆盖绝大多数的设计场景。以圆体字形为基础，通过瘦高的字面，偏向几何的曲线，让字体具有亲和力和时尚感。

![](https://img-1259793745.itggg.cn/20220307144358.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8a3be4db85e950a07c423cc12bc1b8ac8" aria-expanded="true"><div class="accordion-toggle"><span>江西拙楷体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8a3be4db85e950a07c423cc12bc1b8ac8" class="collapse collapse-content"><p></p>「江西拙楷体」是设计师黄煜臣发布的一套免费可商用字体。该字体由黄煜臣一人手写并制作，共收容字符数 6248 个，字形数 6260 个。这是一套手写楷体，相比电脑中标准化制作的楷体，这套字体每个字的笔画是没有统一标准的，每个笔画都带有一些书写的痕迹，具有手写的自然美感。

![](https://img-1259793745.itggg.cn/20220307145006.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-67e03fb19beb972bd1622d25b472994874" aria-expanded="true"><div class="accordion-toggle"><span>杨任东竹石体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-67e03fb19beb972bd1622d25b472994874" class="collapse collapse-content"><p></p>杨任东竹石体是一款可商用的手写字体，字体整体简洁明了，大方，支持中文简体、英文字母、数字符号等格式，适合应用于艺术设计、平面宣传设计、网页设计、书籍印刷等领域。工整秀丽，字母排序井然有序，造就韵律独特的篇章。

![](https://img-1259793745.itggg.cn/20220307145143.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1da9aa74a7b4ba2064525e2f571df3250" aria-expanded="true"><div class="accordion-toggle"><span>摩登小方体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1da9aa74a7b4ba2064525e2f571df3250" class="collapse collapse-content"><p></p>「摩登小方体」将笔画进行几何化处理，减少字体的弧形笔画，并将玩去的弧度改为尖锐的折角，这使字体更加方正锐利，特点鲜明。该字体笔画粗细适中且较为相同，在运笔的过程中，宽度逐渐有细微的变化，是的字体在锐利之中更加稳重有力，不会枯燥单调，也让字体更具辨识度

![](https://img-1259793745.itggg.cn/20220307145401.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b8b89b842b13f754855844d3a391e9225" aria-expanded="true"><div class="accordion-toggle"><span>汉仪唐美人</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-b8b89b842b13f754855844d3a391e9225" class="collapse collapse-content"><p></p>“三月三日天气新,长安水边多丽人。态浓意远淑且真,肌理细腻骨肉匀。”一首《丽人行》写出了盛唐女子的那种明丽又秀美的气质。对于唐代丽人的风度韵致之美,汉仪字库通过一款带有书写韵味的家族字体——汉仪唐美人字体,展`现了唐代不同时期丽人的神韵之美,蕴含了初唐的清秀、娴雅,盛唐的丰丽和晚唐的舒展。

![](https://img-1259793745.itggg.cn/20220307145624.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-66d93f6db5998273bbbb092f87ef355c70" aria-expanded="true"><div class="accordion-toggle"><span>荆南麦圆体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-66d93f6db5998273bbbb092f87ef355c70" class="collapse collapse-content"><p></p>荆南字坊麦圆体的设计灵感来源于韩国的一个综艺节目上的谚文字体，手写的风格圆润的笔画让这款字体看起来很可爱。麦圆体萌系可爱的手写风格，字体每个笔画的粗细相同，两端圆润饱满，凸显可爱风格。虽是手写字体，笔画分明没有细小的连接，使字体更加清新俏皮。无论是做食品类还是母婴类，抑或是儿童类的设计都特别适合。

![](https://img-1259793745.itggg.cn/20220307142430.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-206977d824a879dd69ce7e1016c50ad96" aria-expanded="true"><div class="accordion-toggle"><span>电影字幕体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-206977d824a879dd69ce7e1016c50ad96" class="collapse collapse-content"><p></p>电影字幕体(しねきゃぷしょん)是一款漂亮的日系电影字幕样式 免费商用手写风格字体。这款字体发布于2009年，距离现在年代比较久远。这款字体可以免费商用，作者并未放弃版权，因此，禁止修改字体或版权声明。我们放宽了对重新分发的限制，因此您可以自由分发它。您可以随意使用它。但是，作为字体作者，如果您能报告使用情况，我将不胜感激。

![](https://img-1259793745.itggg.cn/20220307180151.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-434480c7d0e1b56cca86ad55f18503dc46" aria-expanded="true"><div class="accordion-toggle"><span>素材集市康康体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-434480c7d0e1b56cca86ad55f18503dc46" class="collapse collapse-content"><p></p>距离素材集市康康体1.0版本首次发布，已经过去了近两年，发布至今获得各界朋友的喜爱，在2021最后一天，终于迎来素材集市康康体3.0完整版。3.0版本由字集团队成员 时光羊 独立完成，用了近6个月时间，在1.0版基础上增加5131个字补齐GB2312-80编码字库，目前汉字和字符共计7754个

![](https://img-1259793745.itggg.cn/20220307181023.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-222c9da57226fe4394cd045ca66cc64790" aria-expanded="true"><div class="accordion-toggle"><span>KF手写体 </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-222c9da57226fe4394cd045ca66cc64790" class="collapse collapse-content"><p></p>「 KF手写体 」这款字体，虽然这款字体是日文字型，不过也有很多的汉字，日文字型越来越受大家的喜爱，我想应该就是有支持部分汉字的原因， 「 KF手写体 」这款是属于手写风格，整体的感觉相当相当的可爱，重点是这款字型除了个人免费使用之外，也可以商业使用。

![](https://img-1259793745.itggg.cn/20220308104824.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1aa2b2e04325a656577f1cb84b8e004176" aria-expanded="true"><div class="accordion-toggle"><span>甜瓜体 </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1aa2b2e04325a656577f1cb84b8e004176" class="collapse collapse-content"><p></p>分享一款大家会喜欢的日文字体「 甜瓜体 」（日文名：マメロン），作者说应该叫做哈密瓜体。虽然这是一款日文字体，但是收录超过6,600个字 (JIS第1水准2965字，第2水准3390字) ，相当于很多的中文字，并且样式是非常可爱的，当然也要取决于大家自己的喜好哟！喜欢的话赶紧下载吧！

![](https://img-1259793745.itggg.cn/20220308104920.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-759ceeb7906686d2ab5fbea4a26ff5aa97" aria-expanded="true"><div class="accordion-toggle"><span>思源宋体 </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-759ceeb7906686d2ab5fbea4a26ff5aa97" class="collapse collapse-content"><p></p>思源宋体包支持四种不同的东亚语言(简体中文、繁体中文、日文和韩文)，且各有7级字重，其中的每一种都有 65535 个字形，可共同呈现一致的视觉美感。并依照当地语系国家的标准规范，如日文采用日本JIS X 0208及JIS 2004、韩文采用KS X 1001及KS X 1002标准、台湾繁体中文支持Big5并根据中华民国教育部国字标准字体造字、简体中文以中国的GB 18030及通用规范汉字表规范制作。

![](https://img-1259793745.itggg.cn/20220309131326.png)

```html
<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'
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d4ccfd0ecfd508d355f5f942f55f14f80" aria-expanded="true"><div class="accordion-toggle"><span>Ma Shan Zheng </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d4ccfd0ecfd508d355f5f942f55f14f80" class="collapse collapse-content"><p></p>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.

![](https://img-1259793745.itggg.cn/20220309172224.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-007349f02aab03c1708d78213929317993" aria-expanded="true"><div class="accordion-toggle"><span>About ZCOOL KuaiLe </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-007349f02aab03c1708d78213929317993" class="collapse collapse-content"><p></p>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.

![](https://img-1259793745.itggg.cn/20220309172456.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-867f0cafec9f0144f833b1d682a53da031" aria-expanded="true"><div class="accordion-toggle"><span>玩艺记趣体(有版权风险，已下架)</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-867f0cafec9f0144f833b1d682a53da031" class="collapse collapse-content"><p></p>玩艺记趣体是一款超可爱的艺术字体，字体样式看起来十分可爱萌萌哒~特别适合用于广告、教育印刷、网页设计、印刷、文本装潢、篆刻制模、排版等文字领域

![](https://img-1259793745.itggg.cn/20220309203236.png)

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9f8793f1f944ddbcfb30e22871533e8839" aria-expanded="true"><div class="accordion-toggle"><span>MiSans</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9f8793f1f944ddbcfb30e22871533e8839" class="collapse collapse-content"><p></p>  MIUI 13 采用全新系统字体 MiSans； 笔型平直有力，设计更加简约，减少视觉负担，更有利于屏幕显示。共包含29,093个字符，支持多种语言。MiSans 提供了多种 OpenType 功能，可根据特定需求来选择不同形态的字符，例如某些标点符号可以根据周围字母的形态自动调整至合适的位置。MiSans字重齐全，层级清晰，10个字重全部开放下载，供全社会免费商用。

![](https://img-1259793745.itggg.cn/20220314134901.png)

```html
# 可选字体粗细 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 参数，默认都是全局应用
```
<p></p></div></div></div>

&nbsp;

### 常见问题
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fc522c9132312c7d43930d0feeed8d6695" aria-expanded="true"><div class="accordion-toggle"><span>1、自定义要更换的字体怎么弄？比如只换标题字体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-fc522c9132312c7d43930d0feeed8d6695" class="collapse collapse-content"><p></p>

- 引入的时候添加`-without`参数，例如；

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

- 然后在你博客或网站的自定义`CSS`添加，如下代码所示；

```css
.index-post-title {              #类名 多个类名用,分隔
    font-family: 'Noto Serif SC'; #字体名称
}
```
<p></p></div></div></div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-78e06b2bf2a8d7b7adf9b470e536d82687" aria-expanded="true"><div class="accordion-toggle"><span>2、为什么ifame引入的资源字体没效果？</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-78e06b2bf2a8d7b7adf9b470e536d82687" class="collapse collapse-content"><p></p>
- ifame 的资源会有跨域问题，能解决的话那就可以用，或者在源页面上去定义字体。
<p></p></div></div></div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-651cff3c1d0240df0f00dc578b5410e057" aria-expanded="true"><div class="accordion-toggle"><span>3、多个字体混搭着用怎么弄？比如标题一种字体，正文一种字体。</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-651cff3c1d0240df0f00dc578b5410e057" class="collapse collapse-content"><p></p>
 
 - 同时引入需要混搭的字体，记得带 `-without` 参数，例如；想把标题换思源宋体，正文换鸿蒙字体，

````html
<link href="https://itggg.cn/font/NotoSerifSC/font-weight-700-without/" rel="stylesheet"> #引入思源宋体
<link href="https://itggg.cn/font/HarmonyOS-without/" rel="stylesheet"> #引入鸿蒙字体
````

- 然后在你博客或网站的自定义`CSS`添加，如下代码所示；

```css
.bg-light .lter, .bg-light.lter {          #标题CSS类名
    font-family: 'Noto Serif SC';          #字体名称
}
#post-content {                            #正文CSS类名
    font-family: 'HarmonyOSHans-Medium';   #字体名称
}
```
<p></p></div></div></div>
           
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e5ae62a3dc13954648feef49a94fb63495" aria-expanded="true"><div class="accordion-toggle"><span>4、为什么感觉字体渲染的有点慢？</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e5ae62a3dc13954648feef49a94fb63495" class="collapse collapse-content"><p></p>

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

Last modification：March 15, 2022

如果你想请我喝奶茶的话

36 comments

波哥
1 Mouth Ago

既授人以渔又授人以鱼这才是好的教程。

Reply
1. 爆胎
  1 Mouth Ago
  
  @波哥
  
  谢谢支持哈哈
  
  Reply
妮妮
1 Mouth Ago

老板你的网站这个字体是哪个呀这个好看

Reply
1. 爆胎
  1 Mouth Ago
  
  @妮妮
  
  我的是 MIUI 13 粗细500
  
  Reply
sirhexs
1 Mouth Ago

完美，感谢分享

Reply
防水材料加盟
2 Mouths Ago

感谢分享赞一个

Reply
salen
2 Mouths Ago

为什么不挂提就不能访问了。
报403错误

Reply
1. 爆胎
  2 Mouths Ago
  
  @salen
  
  下架给回复了邮件通知的诶 OωO
  换个字体用吧 ٩(ˊᗜˋ*)و
  
  Reply
  1. salen
    2 Mouths Ago
    
    @爆胎
    
    换了手机也是，是不是我这边IP封禁了
    
    Reply
  2. salen
    2 Mouths Ago
    
    @爆胎
    
    是你的博客啊，你的域名相关都访问不了，有点玄学，换dns也是一样∠( ᐛ 」∠)＿
    
    Reply
    
    爆胎
    2 Mouths Ago
    
    @salen
    
    噢，我知道了，垃圾腾讯CDN 我手机也访问不了，马上换阿里。
    
    Reply
salen
2 Mouths Ago

大佬，之前这个很好看的字体：Wanyijiqu 玩艺记趣怎么不见了

Reply
1. 爆胎 1
  2 Mouths Ago
  
  @salen
  
  噢噢，更新接口更掉了，已添加！
  
  Reply
  1. salen
    2 Mouths Ago
    
    @爆胎
    
    谢谢
    
    Reply
    
    爆胎
    2 Mouths Ago
    
    @salen
    
    玩艺记趣字体有版权风险，已下架，知悉！
    
    Reply
littlemoe
2 Mouths Ago

大佬可以加一个<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" />吗？很喜欢这种宋体。

Reply
1. 爆胎
  2 Mouths Ago
  
  @littlemoe
  
  安排上了，见文章，思源宋体
  
  Reply
2. littlemoe
  2 Mouths Ago
  
  @littlemoe
  
  ……链接吞了，我想说的是可以加一个NotoSerifSC字体吗
  
  Reply
  1. 爆胎
    2 Mouths Ago
    
    @littlemoe
    
    好的，一会就安排
    |´・ω・)ノ
    
    Reply
    
    littlemoe
    2 Mouths Ago
    
    @爆胎
    
    太爱你了！！！谢谢！！！！
    
    Reply
哦哦哦
2 Mouths Ago

666666666

Reply
1. 爆胎
  2 Mouths Ago
  
  @哦哦哦
  
  233~
  
  Reply
不知名的人士
2 Mouths Ago

康康

Reply
躲闪的贫僧
2 Mouths Ago

可以的，谢谢分享

Reply
1. 爆胎
  2 Mouths Ago
  
  @躲闪的贫僧
  
  欢迎白嫖唷
  
  Reply
YL
2 Mouths Ago

已经用上了

Reply
吃瓜市民王先生
2 Mouths Ago

可以的，谢谢分享

Reply
1. 爆胎
  2 Mouths Ago
  
  @吃瓜市民王先生
  
  不客气唷
  
  Reply
小梦
2 Mouths Ago

看看

Reply
YL
2 Mouths Ago

Reply
Byzliu
2 Mouths Ago

Reply
清梦
2 Mouths Ago

太棒了

Reply
小白
2 Mouths Ago

这个好，正好需要

Reply
1. 爆胎
  2 Mouths Ago
  
  @小白
  
  多多推荐啊那就哈哈哈~
  
  Reply
耐
2 Mouths Ago

|´・ω・)ノ

Reply
1. 爆胎
  2 Mouths Ago
  
  @耐
  
  ⌇●﹏●⌇
  
  Reply

网易云日推
浏览次数: 54778
为你的博客添加一个萌萌哒的看板娘吧
浏览次数: 41475
氛围音乐
浏览次数: 37827
OneManager搭建网盘详细过程
浏览次数: 10569
渐变响应式 HTML5 导航页
浏览次数: 7774

挺胸的人士
不支持抖音，不知道是去掉了这个支持，还是rsshub 本身路由...
陶小桃Blog
打错字了，记得-->觉得有种
陶小桃Blog
我记得去打漂亮国官网啊，直接插上五星红旗得了，，，没啥高级技术...
小小
你好，公众号文章可以订阅吗？怎么订阅？谢谢。
等一只柴犬
我也返回存在恶意推广

个性化字体修改

爆胎 • 2022 年 03 月 03 日

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

### 背景介绍

- 1994年，微软开发了 TrueType Open “智能字体”技术。

- TrueType字体文件后缀名（*.ttf）

- 1996年，Adobe公司加入 TrueType Open 的开发，随后 TrueType Open 与 Adobe Type 1 合并并成立新项目：OpenType。

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

WOFF 压缩格式的2个特点；

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

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

- 2014年，WebFont 工作组发布了 WOFF2 草案。同年，Chrome 38 版本移除了对 SVG 字体的支持。

- 2018年，WOFF2标准成为 W3C 推荐标准。

------

&nbsp;

### 浏览器字体

![](https://img-1259793745.itggg.cn/20220307150940.png)

`CSS`引用字体文件

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

&nbsp;

### 知识结论

&nbsp;

### 字体格式

#### TTF（TrueType Font）

------

&nbsp;
#### OTF（OpenType Font）

OTF 的主要优点有：

------

&nbsp;
#### WOFF（Web Open Font Format）

------

&nbsp;
#### WOFF2（Web Open Font Format2）

------

&nbsp;
### 使用方法

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

#### handsome用户

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

------

&nbsp;
#### 其他博客或网站

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

------

&nbsp;
### 备注说明

&nbsp;

#### 字体列表
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-db71426b1a6002ee899e370d7e8702a997" aria-expanded="true"><div class="accordion-toggle"><span>HarmonyOS</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-db71426b1a6002ee899e370d7e8702a997" class="collapse collapse-content"><p></p>华为官方发布的一款鸿蒙系统定制字体，取名为HarmonyOS Sans它是免费商用的字体，支持多语言的无级可变字体，包含了简繁中文、拉丁、西里尔、希腊、阿拉伯等5大书写系统，而且支持105种语言

![](https://img-1259793745.itggg.cn/20220307150405.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-49be927937c05ce4ea0131e3716c92d897" aria-expanded="true"><div class="accordion-toggle"><span>OPPO Sans</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-49be927937c05ce4ea0131e3716c92d897" class="collapse collapse-content"><p></p>根据OPPO官方介绍，OPPO Sans字体定位为全球化品牌字体，共覆盖21个国家语言，共11个语种，中文部分由汉仪字库字体设计总监朱志伟指导，字体设计师黄珍元设计完成，西文部分则由美国Pentagram五角公司设计，汉仪字库西文项目组协作完成。

![](https://img-1259793745.itggg.cn/20220307150544.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4b2823ec6202169be8fca9c6e2076ebf81" aria-expanded="true"><div class="accordion-toggle"><span>霞鹜新晰黑</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-4b2823ec6202169be8fca9c6e2076ebf81" class="collapse collapse-content"><p></p>「霞鹜新晰黑」是一款衍生于 IPAex ゴシック的简体中文黑体字型。这是一款基于 IPAex 黑体的中文开源字体，是将日本写法的字体改造成简体中文写法的尝试。本字体尝试在 IPAex 黑体和霞鹜晰黑原有字形的基础上，将其改造成中国大陆的标准字形，更加适合中国大陆用户的需求。

![](https://img-1259793745.itggg.cn/20220307143042.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3b7cd77f90ef15d6a8cd8271cd62f8eb20" aria-expanded="true"><div class="accordion-toggle"><span>仓耳与墨</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3b7cd77f90ef15d6a8cd8271cd62f8eb20" class="collapse collapse-content"><p></p>本字体基于中华人民共和国 GB2312-80 字符集汉字部分标准，TrueType 格式，共收容汉字 6763 个，英文及标点等常用字符 245 个。「仓耳与墨」含有五个字重，随着笔画粗细的变化，字体笔画的组合和形态都有所改变，整体形态也各不相同，可以互相搭配，应用范围较广。

![](https://img-1259793745.itggg.cn/20220307143349.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a2b4402f050d2712d6e3f09eb016921190" aria-expanded="true"><div class="accordion-toggle"><span>站酷文艺体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a2b4402f050d2712d6e3f09eb016921190" class="collapse collapse-content"><p></p>「站酷文艺体」设计新颖，尤其在笔画的处理上别出心裁，通过字形、细节的变化让整体视觉呈现简洁有力、清新淡雅的效果。笔画减少或去掉了弧度，相应进行直角或者圆角的变化处理，使字体几何感增强，突出了简洁的字体有力的字体特点。

![](https://img-1259793745.itggg.cn/20220307144223.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d7eff5f0820db0129b9a3aa7143b72ca88" aria-expanded="true"><div class="accordion-toggle"><span>优设好身体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d7eff5f0820db0129b9a3aa7143b72ca88" class="collapse collapse-content"><p></p>与《优设标题黑》沉稳有力兼具速度感的思路不同，《优设好身体》的整体气质偏向圆柔纤细，设计上更加富有亲和力和现代感，2 套字体互为补充，可以覆盖绝大多数的设计场景。以圆体字形为基础，通过瘦高的字面，偏向几何的曲线，让字体具有亲和力和时尚感。

![](https://img-1259793745.itggg.cn/20220307144358.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ef512a2a3cffb1cc7f34c56ef4197d4592" aria-expanded="true"><div class="accordion-toggle"><span>江西拙楷体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ef512a2a3cffb1cc7f34c56ef4197d4592" class="collapse collapse-content"><p></p>「江西拙楷体」是设计师黄煜臣发布的一套免费可商用字体。该字体由黄煜臣一人手写并制作，共收容字符数 6248 个，字形数 6260 个。这是一套手写楷体，相比电脑中标准化制作的楷体，这套字体每个字的笔画是没有统一标准的，每个笔画都带有一些书写的痕迹，具有手写的自然美感。

![](https://img-1259793745.itggg.cn/20220307145006.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c1de070ad734aa6bb5d33e33a60d0ebd66" aria-expanded="true"><div class="accordion-toggle"><span>杨任东竹石体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c1de070ad734aa6bb5d33e33a60d0ebd66" class="collapse collapse-content"><p></p>杨任东竹石体是一款可商用的手写字体，字体整体简洁明了，大方，支持中文简体、英文字母、数字符号等格式，适合应用于艺术设计、平面宣传设计、网页设计、书籍印刷等领域。工整秀丽，字母排序井然有序，造就韵律独特的篇章。

![](https://img-1259793745.itggg.cn/20220307145143.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a30b1852a712630e08211670fcc40f3d58" aria-expanded="true"><div class="accordion-toggle"><span>摩登小方体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a30b1852a712630e08211670fcc40f3d58" class="collapse collapse-content"><p></p>「摩登小方体」将笔画进行几何化处理，减少字体的弧形笔画，并将玩去的弧度改为尖锐的折角，这使字体更加方正锐利，特点鲜明。该字体笔画粗细适中且较为相同，在运笔的过程中，宽度逐渐有细微的变化，是的字体在锐利之中更加稳重有力，不会枯燥单调，也让字体更具辨识度

![](https://img-1259793745.itggg.cn/20220307145401.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1578dd70831b655d87eb9aa60e04061372" aria-expanded="true"><div class="accordion-toggle"><span>汉仪唐美人</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1578dd70831b655d87eb9aa60e04061372" class="collapse collapse-content"><p></p>“三月三日天气新,长安水边多丽人。态浓意远淑且真,肌理细腻骨肉匀。”一首《丽人行》写出了盛唐女子的那种明丽又秀美的气质。对于唐代丽人的风度韵致之美,汉仪字库通过一款带有书写韵味的家族字体——汉仪唐美人字体,展`现了唐代不同时期丽人的神韵之美,蕴含了初唐的清秀、娴雅,盛唐的丰丽和晚唐的舒展。

![](https://img-1259793745.itggg.cn/20220307145624.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a431f572367acf2b2c0f0bea20ec5e5220" aria-expanded="true"><div class="accordion-toggle"><span>荆南麦圆体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a431f572367acf2b2c0f0bea20ec5e5220" class="collapse collapse-content"><p></p>荆南字坊麦圆体的设计灵感来源于韩国的一个综艺节目上的谚文字体，手写的风格圆润的笔画让这款字体看起来很可爱。麦圆体萌系可爱的手写风格，字体每个笔画的粗细相同，两端圆润饱满，凸显可爱风格。虽是手写字体，笔画分明没有细小的连接，使字体更加清新俏皮。无论是做食品类还是母婴类，抑或是儿童类的设计都特别适合。

![](https://img-1259793745.itggg.cn/20220307142430.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0c5d32b9c20f96db20867799f528d48636" aria-expanded="true"><div class="accordion-toggle"><span>电影字幕体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0c5d32b9c20f96db20867799f528d48636" class="collapse collapse-content"><p></p>电影字幕体(しねきゃぷしょん)是一款漂亮的日系电影字幕样式 免费商用手写风格字体。这款字体发布于2009年，距离现在年代比较久远。这款字体可以免费商用，作者并未放弃版权，因此，禁止修改字体或版权声明。我们放宽了对重新分发的限制，因此您可以自由分发它。您可以随意使用它。但是，作为字体作者，如果您能报告使用情况，我将不胜感激。

![](https://img-1259793745.itggg.cn/20220307180151.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-969be51c319f96627cae41ab5af97b0457" aria-expanded="true"><div class="accordion-toggle"><span>素材集市康康体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-969be51c319f96627cae41ab5af97b0457" class="collapse collapse-content"><p></p>距离素材集市康康体1.0版本首次发布，已经过去了近两年，发布至今获得各界朋友的喜爱，在2021最后一天，终于迎来素材集市康康体3.0完整版。3.0版本由字集团队成员 时光羊 独立完成，用了近6个月时间，在1.0版基础上增加5131个字补齐GB2312-80编码字库，目前汉字和字符共计7754个

![](https://img-1259793745.itggg.cn/20220307181023.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-493409ea809ca2c3dfd40ab3e86e315049" aria-expanded="true"><div class="accordion-toggle"><span>KF手写体 </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-493409ea809ca2c3dfd40ab3e86e315049" class="collapse collapse-content"><p></p>「 KF手写体 」这款字体，虽然这款字体是日文字型，不过也有很多的汉字，日文字型越来越受大家的喜爱，我想应该就是有支持部分汉字的原因， 「 KF手写体 」这款是属于手写风格，整体的感觉相当相当的可爱，重点是这款字型除了个人免费使用之外，也可以商业使用。

![](https://img-1259793745.itggg.cn/20220308104824.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-bbb2b635049c433e657f7d99848ce90898" aria-expanded="true"><div class="accordion-toggle"><span>甜瓜体 </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-bbb2b635049c433e657f7d99848ce90898" class="collapse collapse-content"><p></p>分享一款大家会喜欢的日文字体「 甜瓜体 」（日文名：マメロン），作者说应该叫做哈密瓜体。虽然这是一款日文字体，但是收录超过6,600个字 (JIS第1水准2965字，第2水准3390字) ，相当于很多的中文字，并且样式是非常可爱的，当然也要取决于大家自己的喜好哟！喜欢的话赶紧下载吧！

![](https://img-1259793745.itggg.cn/20220308104920.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fd84f5afba5879aa810f9a8b0cbfce8d77" aria-expanded="true"><div class="accordion-toggle"><span>思源宋体 </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-fd84f5afba5879aa810f9a8b0cbfce8d77" class="collapse collapse-content"><p></p>思源宋体包支持四种不同的东亚语言(简体中文、繁体中文、日文和韩文)，且各有7级字重，其中的每一种都有 65535 个字形，可共同呈现一致的视觉美感。并依照当地语系国家的标准规范，如日文采用日本JIS X 0208及JIS 2004、韩文采用KS X 1001及KS X 1002标准、台湾繁体中文支持Big5并根据中华民国教育部国字标准字体造字、简体中文以中国的GB 18030及通用规范汉字表规范制作。

![](https://img-1259793745.itggg.cn/20220309131326.png)

```html
<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'
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d02b5ca3b7e4a0b68b9a7a9fc656864427" aria-expanded="true"><div class="accordion-toggle"><span>Ma Shan Zheng </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d02b5ca3b7e4a0b68b9a7a9fc656864427" class="collapse collapse-content"><p></p>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.

![](https://img-1259793745.itggg.cn/20220309172224.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a28b3789d3c7eff1fbf27a833b58c20e7" aria-expanded="true"><div class="accordion-toggle"><span>About ZCOOL KuaiLe </span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a28b3789d3c7eff1fbf27a833b58c20e7" class="collapse collapse-content"><p></p>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.

![](https://img-1259793745.itggg.cn/20220309172456.png)

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-115c75933d0ddbf0713f765b1d2955a575" aria-expanded="true"><div class="accordion-toggle"><span>玩艺记趣体(有版权风险，已下架)</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-115c75933d0ddbf0713f765b1d2955a575" class="collapse collapse-content"><p></p>玩艺记趣体是一款超可爱的艺术字体，字体样式看起来十分可爱萌萌哒~特别适合用于广告、教育印刷、网页设计、印刷、文本装潢、篆刻制模、排版等文字领域

![](https://img-1259793745.itggg.cn/20220309203236.png)

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b1ef98ab14a73b05a8fe993ad1fde45354" aria-expanded="true"><div class="accordion-toggle"><span>MiSans</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-b1ef98ab14a73b05a8fe993ad1fde45354" class="collapse collapse-content"><p></p>  MIUI 13 采用全新系统字体 MiSans； 笔型平直有力，设计更加简约，减少视觉负担，更有利于屏幕显示。共包含29,093个字符，支持多种语言。MiSans 提供了多种 OpenType 功能，可根据特定需求来选择不同形态的字符，例如某些标点符号可以根据周围字母的形态自动调整至合适的位置。MiSans字重齐全，层级清晰，10个字重全部开放下载，供全社会免费商用。

![](https://img-1259793745.itggg.cn/20220314134901.png)

#此字体不支持 -without 参数，默认都是全局应用
```
<p></p></div></div></div>

&nbsp;

### 常见问题
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-405453887d36363af39960e7aeb6972839" aria-expanded="true"><div class="accordion-toggle"><span>1、自定义要更换的字体怎么弄？比如只换标题字体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-405453887d36363af39960e7aeb6972839" class="collapse collapse-content"><p></p>

- 引入的时候添加`-without`参数，例如；

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

- 然后在你博客或网站的自定义`CSS`添加，如下代码所示；

```css
.index-post-title {              #类名 多个类名用,分隔
    font-family: 'Noto Serif SC'; #字体名称
}
```
<p></p></div></div></div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d47d848665c275ae9a3364aae66b4e1b47" aria-expanded="true"><div class="accordion-toggle"><span>2、为什么ifame引入的资源字体没效果？</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d47d848665c275ae9a3364aae66b4e1b47" class="collapse collapse-content"><p></p>
- ifame 的资源会有跨域问题，能解决的话那就可以用，或者在源页面上去定义字体。
<p></p></div></div></div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ada4f29b15da035846590d04fa0af75887" aria-expanded="true"><div class="accordion-toggle"><span>3、多个字体混搭着用怎么弄？比如标题一种字体，正文一种字体。</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ada4f29b15da035846590d04fa0af75887" class="collapse collapse-content"><p></p>
 
 - 同时引入需要混搭的字体，记得带 `-without` 参数，例如；想把标题换思源宋体，正文换鸿蒙字体，

- 然后在你博客或网站的自定义`CSS`添加，如下代码所示；

```css
.bg-light .lter, .bg-light.lter {          #标题CSS类名
    font-family: 'Noto Serif SC';          #字体名称
}
#post-content {                            #正文CSS类名
    font-family: 'HarmonyOSHans-Medium';   #字体名称
}
```
<p></p></div></div></div>
           
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-10c09080668799b93378e446ef47ec7e68" aria-expanded="true"><div class="accordion-toggle"><span>4、为什么感觉字体渲染的有点慢？</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-10c09080668799b93378e446ef47ec7e68" class="collapse collapse-content"><p></p>

个性化字体修改

Leave a Comment Cancel reply

36 comments

网易云日推

为你的博客添加一个萌萌哒的看板娘吧

氛围音乐

OneManager搭建网盘详细过程

渐变响应式 HTML5 导航页

Hashcat密码破解

一起摇摆 (((((ી(･◡･)ʃ)))))

office 在线预览开放接口

图床图片快速处理方法

Win10最强组合下载工具推荐

个性化字体修改