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>

相关

Last updated on Jan 17, 2022 21:01 UTC