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

huangapple
go评论46阅读模式
英文:

How to override the default font using locally stored fonts in themes?

问题

我正在使用Quarto构建网站，并尝试覆盖主题中的默认字体。（我的总体目标是使用本地的Google字体而不是使用Google 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 的开发者模式来调查是否使用了本地文件。不幸的是，我的自定义样式表，即 light.scss，无法覆盖默认配置。

如何覆盖使用 API 并改为使用本地字体呢？

英文:

I am using Quarto to build a website and try to override the default fonts within a theme. (My overall goal is to use local google fonts instead of using the google api).

my _quarto.yml looks like that:

project:
  type: website

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

the light.scss does look like that. All fonts are in 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+ */
}

I am using the developer mode in chromium to investigate, if the local files are used. Unfortunately, my custom.scss i.e.,(light.scss) is not able to override the default configuation.

How is it possible to override the use of the api and use local fonts instead?

答案1

得分: 4

以下是翻译好的部分：

  • 首先，通过覆盖Sass变量$web-font-path（给它一个错误的值，比如$web-font-path: "No"）来明确禁用flatly主题正在使用的Web字体路径。

  • 其次，尽管您已经定义了@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");
}

希望对您有所帮助。

英文:

updated answer based on this discussion

  • At first, explicitly disable the path to webfonts that flatly theme is using by overriding the Sass variable $web-font-path (by giving a bad value to it like $web-font-path: "No").

  • Secondly, though You have defined a @font-face, you have not used that. You need to tell quarto to use that font and you can do it by defining Sass variables $font-family-sans-serif (use it to define the sans-serif font family for the page) or $font-family-monospace (use it to define monospace font family for the page) in the light.scss file.

  • Finally, an important thing to note that, Sass variable declaration need to go under the /*-- scss:defaults --*/ layer and @font-face declaration need to go under the /*-- scss:rules --*/ layer.

Therefore the light.scss file should look like,

/*-- 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");
}

答案2

得分: 1

The [scss code][1] for the Flatly theme starts with:

```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);
}

Iterating on @shafee's answer, by putting the following in 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";

everything gets loaded locally.


<details>
<summary>英文:</summary>

The [scss code][1] for the Flatly theme starts with:

$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);
}


Iterating on @shafee&#39;s answer, by putting the following in 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";


everything gets loaded locally.

  [1]: https://github.com/thomaspark/bootswatch/blob/v5/dist/flatly/_bootswatch.scss

</details>



# 答案3
**得分**: 1

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

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

```yaml
---
title: "GoogleFontIssue"
embed-resources: true
---
英文:

You can use embed-resource: TRUE in the header of index.qmd:

This will include everything, javascript, css etc. in a stand-alone version, and there will be no CSS linking to Google fonts.

---
title: &quot;GoogleFontIssue&quot;
embed-resources: true
---

huangapple
  • 本文由 发表于 2023年2月16日 03:46:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/75464776.html
  • css
  • google-fonts
  • quarto
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定