Slidev

Шрифты

Доступно с версии v0.20

Хотя вы можете использовать HTML и CSS для настройки шрифтов и стилей для своих слайдов, Slidev также предоставляет удобный способ их использования без особых усилий.

В вашем fontmatter настройте следующим образом

---
fonts:
  # основной текст
  sans: 'Robot'
  # использование с css классом `font-serif` от windicss
  serif: 'Robot Slab'
  # для блоков кода, inline-кода и т.д.
  mono: 'Fira Code'
---

И это всё.

Шрифты будут автоматически импортированы из Google Fonts. Это означает, что вы можете напрямую использовать любые шрифты, доступные в Google Fonts.

Локальные шрифты

По умолчанию Slidev считает, что все шрифты, указанные в конфигурациях fonts, взяты из Google Fonts. Если вы хотите использовать локальные шрифты, укажите fonts.local, чтобы отключить автоматический импорт.

---
fonts:
  # вы можете использовать `,` чтобы использовать несколько шрифтов для fallback'а (как font-family в css)
  sans: 'Helvetica Neue,Robot'
  # пометить 'Helvetica Neue' как локальный шрифт
  local: 'Helvetica Neue'
---

Начертание шрифта и курсив

По умолчанию Slidev импортирует три начертания: 200,400,600 для каждого шрифта. Вы можете настроить их следующим образом:

---
fonts:
  sans: 'Robot'
  # по умолчанию
  weights: '200,400,600'
  # импорт курсивных шрифтов, по умолчанию `false`
  italic: false
---

Эта конфигурация применяется ко всем веб-шрифтам. Для более детального управления начертанием каждого шрифта вам необходимо вручную импортировать их с помощью HTML и CSS.

Fallback шрифтов

Для большинства сценариев вам нужно только указать «специальный шрифт», и Slidev добавит вам fallback шрифты, например:

---
fonts:
  sans: 'Robot'
  serif: 'Robot Slab'
  mono: 'Fira Code'
---

сбилдится в

.font-sans {
  font-family: "Robot",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.font-serif {
  font-family: "Robot Slab",ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
}
.font-mono {
  font-family: "Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

Если вы хотите отключить fallback шрифты, то настройте следующим образом

---
fonts:
  mono: 'Fira Code, monospace'
  fallback: false
---

Провайдеры

  • Параметры: google | none
  • По умолчанию: google

В настоящее время поддерживаются только Google Fonts, в будущем мы планируем добавить больше провайдеров. Если указать none, то функция автоимпорта будет полностью отключена, и все шрифты будут обрабатываться локально.

---
fonts:
  provide: 'none'
---