Fontes

Disponível a partir da v0.20

Enquanto você pode usar HTML e CSS para customizar as fontes e estilos nos seus slides como preferir, o Slidev também provê um jeito conveniente de usá-los sem esforços.

No seu frontmatter, configure assim:

---
fonts:
  # basicamente o texto
  sans: 'Robot'
  # use com a classe `font-serif` do windicss 
  serif: 'Robot Slab'
  # para blocos de código, códigos inline, etc.
  mono: 'Fira Code'
---

E é só isso.

As fontes serão importadas automaticamente do Google Fonts. Isso significa que você está livre para usar qualquer fonte disponível no Google Fonts diretamente.

Fontes Locais

Por padrão, o Slidev assume que todas as fontes especificadas por meio da configuração fonts vêm do Google Fonts. Se você quiser usar fontes locais, especifique o fonts.local para interromper a importação automática.

---
fonts:
  # assim como no font-family do css, você pode usar `,` para separar múltiplas como substitutas
  sans: 'Helvetica Neue,Robot'
  # marca 'Helvetica Neue' como uma fonte local
  local: 'Helvetica Neue'
---

Espessura & Itálico

Por padrão, o Slidev importa três espessuras 200,400,600 para cada fonte. Você pode configurá-las assim:

---
fonts:
  sans: 'Robot'
  # padrão
  weights: '200,400,600'
  # importa fontes itálicas, o padrão é `false`
  italic: false
---

Está configuração se aplica a todas as fontes da web. Para um controle mais refinado da espessura de cada fonte, você vai precisar importá-las manualmente com HTML e CSS.

Fontes Substitutas

Na maioria das vezes, você só vai precisar especificar a "fonte especial" e o Slidev vai incluir as fontes substitutas para você, por exemplo:

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

vai resultar em

.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;
}

Se você quiser desabilitar as fontes substitutas, configure assim:

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

Provedores

  • Opções: google | none
  • Padrão: google

Atualmente, apenas o Google Fonts é suportado, nós planejamos adicionar mais provedores futuramente. Especificar para none desabilitará a funcionalidade de importação automática por completo e fará com que todas as fontes sejam tratadas como fontes locais.

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