英文:
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
flatlytheme 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 thelight.scssfile. -
Finally, an important thing to note that, Sass variable declaration need to go under the
/*-- scss:defaults --*/layer and@font-facedeclaration 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'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: "GoogleFontIssue"
embed-resources: true
---
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论