Pandoc中使用Lora谷歌字体

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 文件,重新生成。