Octopress 搭建静态博客站点 --- 自定义字体设置

最新推荐文章于 2021-09-01 19:20:30 发布

原创最新推荐文章于 2021-09-01 19:20:30 发布 · 1.1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#博客 #字体 #Octopress #搭建 #站点

Octopress 同时被 2 个专栏收录

5 篇文章

订阅专栏

搭建静态博客站点

4 篇文章

订阅专栏

本文介绍了如何在Octopress博客系统中自定义各种文本和标题的字体样式，包括正文、标题、代码字体等，并提供了具体的_scss文件配置示例。

字体配置文件在 octopress/sass/custom/ 文件里面：_fonts.scss 文件。

Alt text

默认情况下字体配置都是被注释掉的。我们将注释都去掉。

$sans: "Optima", sans-serif;
$serif: "Baskerville", serif;
$mono: "Courier", monospace;
$heading-font-family: "Verdana", sans-serif;
$header-title-font-family: "Futura", sans-serif;
$header-subtitle-font-family: "Futura", sans-serif;

引号里面的是：字体名。后面跟的是：sans-serif(无衬线字体)、serif（衬线）、monospace（等宽字体）。

$sans：定义的是无衬线正文的字体
$serif：定义的是衬线正文的字体
$mono：定义的是代码的字体
$heading-font-family：定义的是文章标题的字体
$header-title-font-family：定义的是博客标题的字体
$header-subtitle-font-family：定义的是博客子标题的字体

我将它们修改为下面这样的配置。（就是将所有的字体都设置为：Comic Sans MS）

$sans: "Comic Sans MS", sans-serif;
$serif: "Comic Sans MS", serif;
$mono: "Comic Sans MS", monospace;
$heading-font-family: "Comic Sans MS", sans-serif;
$header-title-font-family: "Comic Sans MS", sans-serif;
$header-subtitle-font-family: "Comic Sans MS", sans-serif;