先说原因：比黑体好看。

配置流程：

  • 注册 Adobe Typekit 服务
  • 创建 Kits，得到 Typekit js 代码
  • 选择思源宋体，打包进 Kits
  • Typekit js 部署
  • CSS 声明修改
  • 网站部署

注册 Adobe Typekit 服务并同步字体

Tips：博客的流量够用，不需要付费，本步骤即注册 Adobe 的免费服务

  1. 打开 Adobe Typekit，右上角注册，验证邮箱，优先使用 Gmail 邮箱
  2. 打开 思源宋体 Source Han Serif 页面，官方提供了多种样式，选择自己喜欢的，点击右侧 SYNC（一般有 Light、Medium、Blod 就够用）

创建 Kits，得到 Typekit js 代码

Tips：将字体打成 Kits 包，以便在博客上直接调用（免费服务仅能开通 1 个 Kits）

  1. 打开 Kits 设置页面，选择 New 新建 Kits 包
  2. 填写 Name 和 Domains（即博客域名，可填多个），确认即创建成功

  3. 显示 Embed code 代码，选 DEFAULT，拷贝代码，如：

    1
    2
    <script src="https://use.typekit.net/rlsifboex.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>

  4. 储存待用

选择思源宋体，打包进 Kits

  1. 打开 Synced fonts | Typekit，选择思源宋体（Source Han Serif Simplified Chinese），点击 MANAGE
  2. 查看自己喜欢的字体是否都已 SYNC，点击 ADD TO KIT
  3. 选择已创建的 Kits
  4. 在弹出的页面左侧 Weights & Styles 处选择自己在站内需要生效的字体
  5. 全部确认后，点击右下角的 Publish

Typekit js 部署

  1. 打开 HTML2jade

  2. 将前面得到的 js 代码复制至左栏，将显示的代码全部替换，把右栏得到的结果复制下来，注意缩进关系，如：

    1
    2
    3
    script(src='https://use.typekit.net/rlsifboex.js')
    script.
     	  try{Typekit.load({ async: true });}catch(e){}

  3. 在本地的 HEXO 文件夹下，路径 Hexo\themes\maupassant\layout\_partial 下找到 after_footer.jade，打开

  4. 在文档最末，粘贴刚才得到的代码，注意缩进关系：两个 script 同级，try 缩进一级

CSS 声明修改

  1. 在本地的 HEXO 文件夹下，路径 Hexo\themes\maupassant\source\css 下找到 style.scss，打开
  2. command + f 分别搜索 pure-g 和 body，将 "source-han-serif-sc", serif, 增至 font-family: 项的最前端，如： 
    1
    2
    3
    .pure-g [class *="pure-u"] {
         font-family: "source-han-serif-sc", serif, Helvetica, "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Source Han Sans CN", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei";
       }

网站部署

hexo g -d 你懂的

引用：

关于字体选型：

字体工具：

CHANGELOG

  • 170803 Arlmy 创建
  • 170804 Arlmy 整理完成