如何使用主题中本地存储的字体覆盖默认字体？

Question

我正在使用 Quarto 构建一个网站，并尝试覆盖主题中的默认字体。（我的总体目标是使用本地谷歌字体而不是使用谷歌API）。

我的_quarto.yml样子是这样的：

project:
  type: website

format:
  html:
    theme: 
      light: [flatly, light.scss]

确实light.scss看起来像那样。所有字体都在fonts/

/*-- scss:defaults --*/

/* lato-regular - latin-ext_latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v23-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/lato-v23-latin-ext_latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

我正在使用 chromium 中的开发人员模式来调查是否使用了本地文件。不幸的是，我的custom.scss ie，（light.scss）无法覆盖默认配置。

如何才能覆盖 api 的使用并使用本地字体呢？

Answer 1

根据此讨论更新了答案

• 首先，flatly通过覆盖 Sass 变量$web-font-path（通过给它一个错误的值，如$web-font-path: "No"）显式禁用该主题正在使用的 webfonts 的路径。

• 其次，虽然您已经定义了 a @font-face，但您还没有使用它。您需要告诉 quarto 使用该字体，您可以通过在文件中定义Sass 变量 $font-family-sans-serif（使用它来定义页面的无衬线字体系列）或$font-family-monospace（使用它来定义页面的等宽字体系列）来实现light.scss。

• 最后，需要注意的一点是，Sass 变量声明需要在该/*-- scss:defaults --*/层下，并且@font-face声明需要在该/*-- scss:rules --*/层下。

因此该light.scss文件应该看起来像，

/*-- scss:defaults --*/

$font-family-sans-serif: "Lato";
$font-family-monospace: "Lato";
$bs-body-font-family: "Lato";
$web-font-path: "No";

/*-- scss:rules --*/

/* lato-regular - latin-ext_latin */
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/lato-v23-latin-ext_latin-regular.woff2") format("woff2"),
      url("./fonts/lato-v23-latin-ext_latin-regular.woff") format("woff");
}

/* lato-italic - latin-ext_latin */
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/lato-v23-latin-ext_latin-italic.woff2") format("woff2"),
      url("./fonts/lato-v23-latin-ext_latin-italic.woff") format("woff");
}

/* lato-700 - latin-ext_latin */
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/lato-v23-latin-ext_latin-700.woff2") format("woff2"),
      url("./fonts/lato-v23-latin-ext_latin-700.woff") format("woff");
}

/* lato-700italic - latin-ext_latin */
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/lato-v23-latin-ext_latin-700italic.woff2") format("woff2"),
      url("./fonts/lato-v23-latin-ext_latin-700italic.woff") format("woff");
}