Web Open Font Format 2
定义:WOFF2 是 WOFF 的升级版,由 Mozilla、Microsoft、Google 和其他组织共同开发。它是一种专为网络传输设计的字体格式,旨在优化网络性能。
特点:
基于 TTF 或 OTF(OpenType Font)格式,但使用了更高效的压缩算法,比 WOFF 和原始 TTF/OTF 文件更小,从而减少加载时间。
在<blog_root_folder>\themes\icarus\source\css\font
中创建文件夹,例如这里添加了MapleFont
文件夹,并将下载好的字体文件(ttf,woff2,.etc)放入MapleFont
文件夹中
╭───┬────────────────────────┬──────┬─────────┬────────────────╮│ # │ 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
修改font.css
,加入新字体的引用
woff
: format(“woff”)woff2
: format(“woff2”)ttf
: format("truetype)otf
: format(“opentype”)@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");}
修改theme\icarus\include\style\base.styl
,在$family-sans-serif
和$family-code
前面引用 font.css;
$family-sans-serif
正文字体,在字体列表前面加入 Maple Hand$family-code
代码字体,在字体列表前面加入 Maple Mono@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'
Change Icarus Theme Font