Back
博客烹饪札记

Hugo｜引入外部字体

擅长把简单的事情做复杂

简单修改了一下此地的字体，由思源宋体修改成了江城圆体。之前用的是小球飞鱼的设置，嵌入的是谷歌给的代码，但我这次看中的都没提供嵌入代码，看到獅尾圓體里面给的 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%）。

——Webfont（网页字体） | Glyphs

这是由苹果电脑在 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 及更新的版本支持。

——Webfont（网页字体） | Glyphs

它属于 TrueType 和 OpenType 字体格式，有着存储渲染技术的模拟压缩。使用 WOFF可以存储带有字体信息的原数据。它自 2010 年起被使用，主要用于在互联网上存储和传输字体。它由 Mozilla 基金会开发。

——Covertio

基本操作

方法 1

  1. 把.ttf文件放在/static/fonts下
  2. 在/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 blobcatsipsweat.png

如果是方法 2，需要将 ttf 转成 woff，我之前直接用的 ttf，不能识别，不过也可能是别的原因。

  1. 下载 ttf 字体

  2. 转换成 woff 字体

    工具：TTF 到 WOFF 转换器

  3. 上传到 github

  4. 通过 CDN 引用

  5. 修改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>

相关

Hugo 字体
Last updated on Jan 17, 2022 21:01 UTC