Я использую Quarto для создания веб-сайта и пытаюсь переопределить шрифты по умолчанию в теме. (Моя общая цель - использовать локальные шрифты Google вместо использования API Google).
мой _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+ */
}
Я использую режим разработчика в хроме, чтобы выяснить, используются ли локальные файлы. К сожалению, мой custom.scss, т. е. (light.scss
), не может переопределить конфигурацию по умолчанию.
Как можно переопределить использование API и вместо этого использовать локальные шрифты?
да. Я отредактировал свой комментарий соответственно.
Сначала явно отключите путь к веб-шрифтам, которые использует тема flatly
, переопределив переменную Sass $web-font-path
(присвоив ей неправильное значение, например $web-font-path: "No"
).
Во-вторых, хотя Вы определили @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");
}
Код scss для темы Flatly начинается с:
$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';
без успеха.
Я думаю, что это зависит от темы; Я меняю свой ответ, чтобы он работал ровно
Вы можете использовать embed-resource: TRUE
в заголовке index.qmd
:
Это будет включать в себя все, javascript, css и т. д. в автономной версии, и не будет CSS, связанного со шрифтами Google.
---
title: "GoogleFontIssue"
embed-resources: true
---
под
custom.scss
вы имеете в видуlight.scss
?