Как переопределить шрифт по умолчанию, используя локально сохраненные шрифты в темах?

Я использую 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 и вместо этого использовать локальные шрифты?

под custom.scss вы имеете в виду light.scss?

shafee 15.02.2023 20:57

да. Я отредактировал свой комментарий соответственно.

Michael K 15.02.2023 21:05
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
5
2
162
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

обновленный ответ на основе этого обсуждения

  • Сначала явно отключите путь к веб-шрифтам, которые использует тема 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'; без успеха.

Michael K 16.02.2023 14:03

Я думаю, что это зависит от темы; Я меняю свой ответ, чтобы он работал ровно

Cedric Rossi 16.02.2023 20:51

Вы можете использовать embed-resource: TRUE в заголовке index.qmd:

Это будет включать в себя все, javascript, css и т. д. в автономной версии, и не будет CSS, связанного со шрифтами Google.

---
title: "GoogleFontIssue"
embed-resources: true
---

Другие вопросы по теме