backgroud
今天看一篇博客时,发现标题用lora 字体挺漂亮的。 就研究了下如何在 Pandoc 中实现。
因为之前已经做过设置,添加字体非常简单。
how to do
新建一个 header.html 文件,引入谷歌字体链接。
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap" rel="stylesheet" />
在 config.yaml 中添加 include-in-header 选项,在转换 html 时自动添加元数据。
include-in-header: src/sources/header.html
在 input.css 中,对标题添加 Lora 字体。
h1 {
@apply my-4 font-['Lora'] text-4xl font-semibold;
}
h2 {
@apply my-3 font-['Lora'] text-3xl font-semibold;
}
运行 npm run css,使 tailwind 重新输出 main.css 文件。
这样,后续再转换的 html 都会应用到新字体。 之前的旧文章如果需要应用新字体,可以删除全部 html 文件,重新生成。