Featured image of post Stack theme hugo 字体设置

Stack theme hugo 字体设置

defult

参考链接

博客教程 中文网字体库 本文以中文网字体库为例, 剩下的可以举一反三

获取字体设置

  1. 打开中文网字体库找到自己喜欢的字体
  2. 复制字体链接, 以中文网为例, 你需要复制以下代码.
<link
  rel="stylesheet"
  href="https://chinese-fonts-cdn.deno.dev/packages/dymh/dist/DouyinSansBold/result.css"
/>

以及

body {
  font-family: "Douyin Sans";
  font-weight: "700";
}

配置字体

  1. /layouts/partials/head/custom.html 中将刚刚的link粘贴进去
  2. /assets/scss/custom.scss 中加入
// 文章页字体
body,
.article-content {
  font-family: "<字体名>", sans-serif;
  font-weight: "<粗细>";
}

// 标题字体
body,
.article-title {
  font-family: "<字体名>", sans-serif;
  font-weight: "<粗细>";
}

// 首页字体
body,
.article-page {
  font-family: "<字体名>", sans-serif;
  font-weight: "<粗细>";
}
  1. 字体名就是刚刚找到的第二个信息里font-family字段后的字符串, 下面就是对应的文本粗细.
  2. 如果不同的部分想要设置不同的字体在前面的步骤就多复制几个字体链接进去, 然后在最后这里把对应的字体改进去即可.
A winner is just a loser who tried one more time.
Robust AI
使用 Hugo 构建
主题 StackJimmy 设计