Install font
选择心仪的字体,下载到本地。建议使用 woff2( Web Open Font Format 2.0) 格式
ttf-to-woff2
Web Open Font Format 2
定义:WOFF2 是 WOFF 的升级版,由 Mozilla、Microsoft、Google 和其他组织共同开发。它是一种专为网络传输设计的字体格式,旨在优化网络性能。
特点:
基于 TTF 或 OTF(OpenType Font)格式,但添加了额外的压缩。
使用更高效的压缩算法,比 WOFF 和原始 TTF/OTF 文件更小,从而加快了下载速度。
包含了元数据和版权信息。
广泛支持现代浏览器,包括 Chrome、Firefox、Safari 和 Edge。
Modify theme files
Add font files
在<blog_root_folder>\themes\icarus\source\css\font
中创建文件夹,例如这里添加了MapleFont
文件夹,并将下载好的字体文件(ttf,woff2,.etc)放入MapleFont
文件夹中
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| ╭───┬────────────────────────┬──────┬─────────┬────────────────╮ │ # │ name │ type │ size │ modified │ ├───┼────────────────────────┼──────┼─────────┼────────────────┤ │ 0 │ css\font\font.css │ file │ 4.9 KiB │ 6 minutes ago │ │ 1 │ css\font\fontawesome │ dir │ 0 B │ 3 weeks ago │ │ 2 │ css\font\MapleFont │ dir │ 4.0 KiB │ 19 minutes ago │ │ 3 │ css\font\sourcecodepro │ dir │ 0 B │ 3 weeks ago │ │ 4 │ css\font\ubuntu │ dir │ 0 B │ 3 weeks ago │ ╰───┴────────────────────────┴──────┴─────────┴────────────────╯
<blog_root_folder>/themes/icarus/source/css/font/MapleFont -a--- 8.1M 24 Jul 17:22 MapleHand-Bold.woff2 -a--- 8.8M 24 Jul 17:22 MapleHand-Regular.woff2 -a--- 58k 9 Jun 20:02 MapleMono-NF-CN-Regular.woff2
|
Modify font.css
修改font.css
,加入新字体的引用
font-face syntax
woff
: format(“woff”)
woff2
: format(“woff2”)
ttf
: format(“truetype)
otf
: format(“opentype”)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| @font-face { font-family: "Maple Hand"; font-style: normal; font-weight: 400; src: local("Maple Hand"), url(/css/font/MapleFont/MapleHand-Regular.woff2) format("woff2"); }
@font-face { font-family: "Maple Hand"; font-style: normal; font-weight: 400; src: local("Maple Hand"), url(/css/font/MapleFont/MapleHand-Bold.woff2) format("woff2"); }
@font-face { font-family: "Maple Mono"; font-style: normal; font-weight: 400; src: local("MapleMono"), url(/css/font/MapleFont/MapleMono-NF-CN-Regular.woff2) format("woff2"); }
|
Modify base.styl
修改theme\icarus\include\style\base.styl
,在$family-sans-serif
和$family-code
前面引用 font.css;
$family-sans-serif
正文字体,在字体列表前面加入 Maple Hand
$family-code
代码字体,在字体列表前面加入 Maple Mono
1 2 3 4
| @import '../../source/css/font/font.css'
$family-sans-serif ?= Maple Hand,-apple-system,BlinkMacSystemFont,"Segoe UI Emoji","Segoe UI",Ubuntu,Roboto,'Open Sans',Oxygen-Sans,Cantarell,'Microsoft YaHei',sans-serif $family-code ?= Maple Mono,Maple Hand,'Source Code Pro',Menlo,SFMono-Regular,Consolas,Roboto Mono,'Courier New',monospace,'Microsoft YaHei'
|