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一起使用的两种字体，衬线为正文，标题为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;
}

Jekyll和Minima有两种字体？

1 个答案: