Шрифты
Доступно с версии 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'
---