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 "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;
}