logo标签列表

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

cssquartogoogle-fonts
8

我正在使用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即（light.scss）无法覆盖默认配置。

有什么办法可以覆盖API的使用并改用本地字体呢？

1
你所说的 custom.scss 是指 light.scss 吗？ - shafee
是的。我已经相应地编辑了我的评论。 - Michael K
3个回答
4

基于此讨论的更新答案

  • 首先，通过覆盖Sass变量$web-font-path（例如：$web-font-path:“No”）来显式禁用flatly主题使用的网页字体路径。

  • 其次，虽然你已经定义了一个@font-face，但是你没有使用它。你需要告诉Quarto使用那个字体，并且可以通过在light.scss文件中定义Sass变量$font-family-sans-serif（用于定义页面无衬线字体族）或者$font-family-monospace（用于定义页面等宽字体族）来实现。

  • 最后，重要的一点是，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");
}
1

Flatly主题的scss代码以以下内容开头：

$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
@if $web-font-path {
  @import url($web-font-path);
}

在 @shafee 的答案基础上迭代，将以下内容放入 light.scss 文件中

/*-- scss:defaults --*/

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


$font-family-sans-serif: 'Lato'; 

$web-font-path: "fonts/Lato-Regular.woff2";

所有东西都在本地加载。

感谢确认。看起来我仍然忽略了某些东西。正如您在截图中所看到的，问题仍然存在于普通样式中。我还添加了$font-size-root: 'Lato';但没有成功。 - Michael K
我认为这是主题特定的；我正在更改我的答案，使其适用于 flatly。 - Cedric Rossi
1

您可以在index.qmd的头部使用embed-resource: TRUE：

这将包括所有内容，包括JavaScript、CSS等在内的独立版本，不会链接到Google字体的CSS。

---
title: "GoogleFontIssue"
embed-resources: true
---
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接