Jekyll 和 Minima 有两种字体？

Question

我试图让 Jekyll 使用两种字体，一种用于标题，一种用于正文。为此，我将整个 _sass 文件夹复制到我网站的根目录，然后更改了 \_sass\minima\_base.scss 以包含两种字体的定义...

/**
  * Basic styling
 */
body {
  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
  color: $text-color;
  background-color: $background-color;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
     -moz-font-feature-settings: "kern" 1;
       -o-font-feature-settings: "kern" 1;
          font-feature-settings: "kern" 1;
  font-kerning: normal;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
  font: $heading-font-weight #{$heading-font-size}/#{$heading-line-height} $heading-font-family;
  margin-bottom: $spacing-unit / 2;
}

然后在 \_sass\minimua.scss 中，我更改了基本字体的样式，然后添加了标题字体：

$base-font-family: serif, Times, "Times New Roman";
$base-font-size:   16px !default;
$base-font-weight: 400 !default;
$small-font-size:  $base-font-size * 0.875 !default;
$base-line-height: 1.5 !default;

$heading-font-family: sans-serif, Helvetica, Arial;
$heading-font-size:   16px !default;
$heading-font-weight: 400 !default;
$heading-line-height: 1.5 !default;

我还创建了如下所示的 \_sass\my_overrides.scss： @charset "utf-8";

// Define defaults for each variable.

$base-font-family: serif, Times, "Times New Roman";
$heading-font-family: san-serif, Helvetica, Arial;

但据我所知，字体在使用时会被切换（截​​图如下）。而且我可能忘记了一些事情，因为整个过程非常复杂。

所以我的问题是： 如何让 Jekyll 使用两种字体，serif 用于正文，san-serif 用于标题？

我想我也可以问一下 Jekyll 是否内置了双字体功能，如果没有，为什么不呢？但也许这听起来好战？ （这不是故意的。）

Screenshot showing switched fonts

Answer 1

您可以将您的 css 拆分为单独定位，如下所示：

h1, h2, h3, h4, h5, h6 {
    font: $heading-font-weight #{$heading-font-size}/#{$heading-line-height} $heading-font-family;
    margin-bottom: $spacing-unit / 2;
}

p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
    font: $base-font-weight #{$base-font-size}/#{$base-font-height} $$base-font-family;
    margin-bottom: $spacing-unit / 2;
}