最近看见好多博客都改成了个性化字体显示,主题自带的字体阅读起来感觉不是特别好,所以自己搞搞咯
背景介绍
早期电脑显示的字体都是点阵字体,通过像素点标记字符,这种方式节省电脑运算量,但显示效果差,字体一旦放大就出现锯齿甚至马赛克问题。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 种方式使用,全部替换或自定义。
直接引入则默认替换所有字体
引入后需要自己手动添加 CSS 类名 ,具体方法见下文 “常见问题“
handsome用户
主题设置 → 开发者设置 → 自定义输出head 头部的HTML代码 中添加即可
其他博客或网站
同样的方式,自定义输出head
头部的HTML
代码 添加就行了。
备注说明
字体文件第一次加载需要几秒时间,网络支持QUIC
,支持PJAX
和AJAX
方法,精力有限,没有挨个测试,如发现接口无资源请留言,字体收录如下,都是免费并可商用的,无版权风险,如果有想要的字体可以留言,后续慢慢增加~
字体列表
<link href="https://itggg.cn/font/HarmonyOS/" rel="stylesheet">
#自定义引入的字体名称
'HarmonyOSHans-Medium'
<link href="https://itggg.cn/font/OPPOSans/" rel="stylesheet">
#自定义引入的字体名称
'OPPOSans'
<link href="https://itggg.cn/font/LXGWNewClearGothic/" rel="stylesheet">
#自定义引入的字体名称
'LXGWNewClearGothic-Book'
<link href="https://itggg.cn/font/CEYM/" rel="stylesheet">
#自定义引入的字体名称
'CangErYuMoW03-2'
<link href="https://itggg.cn/font/ZhanKuWenYiTi/" rel="stylesheet">
#自定义引入的字体名称
'ZhanKuWenYiTi-2'
<link href="https://itggg.cn/font/YouSheHaoShenTi/" rel="stylesheet">
#自定义引入的字体名称
'YSHaoShenTi-2'
<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'
<link href="https://itggg.cn/font/DianYingZiMuTi/" rel="stylesheet">
#自定义引入的字体名称
'dianyingzimuti-2'
<link href="https://itggg.cn/font/SuCaiJiShiKangKangTi/" rel="stylesheet">
#自定义引入的字体名称
'SuCaiJiShiKangKangTi-2'
<link href="https://itggg.cn/font/KFShouXieTi/" rel="stylesheet">
#自定义引入的字体名称
'KFShouXieTi-2'
<link href="https://itggg.cn/font/TianGuaTi-5/" rel="stylesheet">
#自定义引入的字体名称
'Mamelon-5-Hi-Regular-2'
<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'
<link href="https://itggg.cn/font/MaShanZheng/" rel="stylesheet">
#自定义引入的字体名称
'Ma Shan Zheng'
<link href="https://itggg.cn/font/ZCOOLKuaiLe/" rel="stylesheet">
#自定义引入的字体名称
'ZCOOL KuaiLe'
# 可选字体粗细 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 参数,默认都是全局应用
常见问题
- 引入的时候添加
-without
参数,例如;
<link href="https://itggg.cn/font/NotoSerifSC-without/" rel="stylesheet">
- 然后在你博客或网站的自定义
CSS
添加,如下代码所示;
.index-post-title { #类名 多个类名用,分隔
font-family: 'Noto Serif SC'; #字体名称
}
- ifame 的资源会有跨域问题,能解决的话那就可以用,或者在源页面上去定义字体。
- 同时引入需要混搭的字体,记得带
-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'; #字体名称
}
- 收录的字体,woff2 压缩后的大小均在 1M~2M 之间,已经无法再小了,只有几个字体稍微大点,2M多,不超过3M。速度问题接口已经尽力优化了,都缓存在CDN 上的,如果您的服务器在境外,可能就稍慢一点了,国内服务器速度几乎还是无感的,除非本地的网络环境也慢,那我就没办法优化了,毕竟字体的体积摆在这里的 ╮(╯▽╰)╭
41 comments
哥,字体接口怎么做可以出个教程吗
可以啊,后期安排
既授人以渔又授人以鱼
这才是好的教程。
谢谢支持 哈哈
老板 你的网站这个字体是哪个呀 这个好看
我的是 MIUI 13 粗细500
完美,感谢分享
感谢分享 赞一个
为什么不挂提就不能访问了。
报403错误
下架给回复了邮件通知的诶 OωO
换个字体用吧 ٩(ˊᗜˋ*)و
换了手机也是,是不是我这边IP封禁了
是你的博客啊,你的域名相关都访问不了,有点玄学,换dns也是一样∠( ᐛ 」∠)_
噢,我知道了,垃圾腾讯CDN 我手机也访问不了,马上换阿里。
大佬,之前这个很好看的字体:Wanyijiqu 玩艺记趣 怎么不见了
噢噢,更新接口更掉了,已添加!
谢谢
玩艺记趣字体有版权风险,已下架,知悉!
大佬可以加一个<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" />吗?很喜欢这种宋体。
安排上了,见文章,思源宋体
……链接吞了,我想说的是可以加一个NotoSerifSC字体吗
好的,一会就安排
|´・ω・)ノ
太爱你了!!!谢谢!!!!
666666666
233~
康康
可以的,谢谢分享
欢迎白嫖唷
可以的,谢谢分享
不客气唷
看看
随便康康
回一朵小花
太棒了
啊啊啊啊啊啊
这个好,正好需要
多多推荐啊那就 哈哈哈~
|´・ω・)ノ
⌇●﹏●⌇