简单修改了一下此地的字体,由思源宋体修改成了江城圆体。之前用的是小球飞鱼的设置,嵌入的是谷歌给的代码,但我这次看中的都没提供嵌入代码,看到獅尾圓體里面给的 css 引入代码颇为熟悉,灵机一动,折腾了一下。
2021/11/19 更新:加载有点慢,重新改为思源宋体
相关知识
TTF
普通 OpenType:OTF 和 TTF
用于尚不支持 WOFF 的旧版浏览器的回退格式,包括 Chrome 4(市占率 0%)、Safari 3.2–5.0(macOS 及 iOS,市占率约 0.02%)、Opera 10.1–11.0(市占率 0%)、Android WebKit 2.2–4.3(市占率 0.28%)。
这是由苹果电脑在 1989 年开发的标准 TrueType 字体格式。至今 TTF 的优势是其按像素要求呈现的高水平字体显示控制。它有矢量格式,所以很容易缩放。如今 TrueType 用于从苹果到微软的操作系统中。
——Covertio
WOFF
Web 开放字体格式(Web Open Font Format)
目前浏览器支持最广泛的格式;受 Chrome 5、Firefox 3.6、IE9、Edge、Safari 5.1、Opera 11.1、Android WebKit 4.4 及更新的版本支持。
它属于 TrueType 和 OpenType 字体格式,有着存储渲染技术的模拟压缩。使用 WOFF可以存储带有字体信息的原数据。它自 2010 年起被使用,主要用于在互联网上存储和传输字体。它由 Mozilla 基金会开发。
——Covertio
基本操作
方法 1
- 把
.ttf
文件放在/static/fonts
下 - 在
/layouts/partials/head/custom.html
中以以下格式引入
@font-face {
font-family: JiangChengYuanTi; /*字体名字*/
src: url(/fonts/300W.ttf) format("truetype"); /*路径和格式*/
font-weight: 300; /*字重设定*/
font-style: normal;
}
方法 2
方法 1 似乎很完美,那为什么还存在方法 2 呢?当然是因为我刚知道方法 1
如果是方法 2,需要将 ttf 转成 woff,我之前直接用的 ttf,不能识别,不过也可能是别的原因。
-
下载 ttf 字体
-
转换成 woff 字体
-
上传到 github
-
通过 CDN 引用
-
修改
custom.html
一些字体设定
江城圆体
我现在的设定,引用两种格式,支持 firefox
<style>
@font-face {
font-family: JiangChengYuanTi;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/300W.woff) format("woff"),
url(/fonts/300W.ttf) format("truetype");
font-weight: 300;
}
@font-face {
font-family: JiangChengYuanTi;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/400W.woff) format("woff"),
url(/fonts/400W.ttf) format("truetype");
font-weight: 400;
}
@font-face {
font-family: JiangChengYuanTi;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/500W.woff) format("woff"),
url(/fonts/500W.ttf) format("truetype");
font-weight: 500;
}
@font-face {
font-family: JiangChengYuanTi;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/600W.woff) format("woff"),
url(/fonts/600W.ttf) format("truetype");
font-weight: 600;
}
:root {
--article-font-family: "JiangChengYuanTi", var(--base-font-family);
}
</style>
- 方法 1
<style>
@font-face {
font-family: JiangChengYuanTi;
src: url(/fonts/300W.ttf) format("truetype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: JiangChengYuanTi;
src: url(/fonts/400W.ttf) format("truetype");
font-weight: 400;
}
@font-face {
font-family: JiangChengYuanTi;
src: url(/fonts/500W.ttf) format("truetype");
font-weight: 500;
}
@font-face {
font-family: JiangChengYuanTi;
src: url(/fonts/600W.ttf) format("truetype");
font-weight: 600;
}
:root {
--article-font-family: "JiangChengYuanTi", var(--base-font-family);
}
</style>
- 方法 2
<style>
@font-face {
font-family: JiangChengYuanTi;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/300W.woff) format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: JiangChengYuanTi;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/400W.woff) format("woff");
font-weight: 400;
}
@font-face {
font-family: JiangChengYuanTi;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/500W.woff) format("woff");
font-weight: 500;
}
@font-face {
font-family: JiangChengYuanTi;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/600W.woff) format("woff");
font-weight: 600;
}
:root {
--article-font-family: "JiangChengYuanTi", var(--base-font-family);
}
</style>
975 圆体
这个字体我最后没有用,所以没有按方法 1 导入,只有用来测试的方法 2 代码:
- 方法 2
<style>
@font-face {
font-family: MaruSC;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/975MaruSC-Regular.woff)
format("woff");
font-weight: 400;
}
@font-face {
font-family: MaruSC;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/975MaruSC-Medium.woff)
format("woff");
font-weight: 500;
}
@font-face {
font-family: MaruSC;
src: url(https://cdn.jsdelivr.net/gh/norevi/fonts@2.2/woff/975MaruSC-Bold.woff)
format("woff");
font-weight: 700;
}
:root {
--article-font-family: "MaruSC", var(--base-font-family);
}
</style>
思源宋体
修改前的字体,用这个字体的时候,分别修改了很多细节部分的字重和字号。因为字体比较细,选用了比现在的更深一点的字色。
<style>
:root {
--article-font-family: "Noto Serif SC", var(--base-font-family);
}
</style>
<script>
(function () {
const customFont = document.createElement("link");
customFont.href =
"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap";
customFont.type = "text/css";
customFont.rel = "stylesheet";
document.head.appendChild(customFont);
})();
</script>