Tipografia em Ignite UI for Blazor

A tipografia em Ignite UI for Blazor é modelada de acordo com o Sistema de tipos de material. Não é intrusivo e opcional, permitindo que você modifique os estilos de tipo usando apenas CSS.

Visão geral

O sistema de tipos é uma escala de tipos que consiste em 13 estilos de tipos de categorias diferentes usados na maioria dos componentes. Todas as categorias de balança são completamente reutilizáveis e ajustáveis pelo usuário final.

Aqui está uma lista de todos os 13 estilos de categoria, conforme definido para o Tema Bootstrap em Ignite UI for Blazor:

Categoria de escala	Família de fontes	Peso da fonte	Tamanho da fonte	Transformação de texto	Espaçamento entre letras	Altura da linha	Variáveis CSS
h1	System Font	500	2,5 rem	nenhum	-0.09375 rem	3 restos	--ig-h1-*
h2	System Font	500	2 rem	nenhum	-0.0312 rem	2.4 rem	--ig-h2-*
h3	System Font	500	1,75 reais	nenhum	0	2.1 rem	--ig-h3-*
h4	System Font	500	1,5 rem	nenhum	0.015625 rem	1.8 rem	--ig-h4-*
h5	System Font	500	1,25 reais	nenhum	0	1,5 rem	--ig-h5-*
h6	System Font	500	1 resto	nenhum	0.009375 rem	1.2 rem	--ig-h6-*
legenda-1	System Font	400	.875 rem	nenhum	0.009375 rem	1,5 rem	--ig-subtitle-1-*
legenda-2	System Font	400	.9 rem	nenhum	0.00625 rem	1.35 rem	--ig-subtitle-2-*
corpo-1	System Font	400	1 resto	nenhum	0.03125 rem	1,5 rem	--ig-body-1-*
corpo-2	System Font	400	.9 rem	nenhum	0.015625 rem	1,5 rem	--ig-body-2-*
botão	System Font	500	1 resto	nenhum	0.046875 rem	1,5 rem	--ig-button-*
rubrica	System Font	400	.75 rem	nenhum	0.025 rem	1 resto	--ig-caption-*
sobrelinha	System Font	400	.625 rem	maiúsculas	0.09375 rem	1 resto	--ig-overline-*

Cada tema define sua própria escala de tipo. Isso significa que cada um dos temas que enviamos - Material, Fluent, Boostrap e Indigo terá sua própria escala de tipo. Todos eles compartilham as mesmas categorias de escala, mas podem ter diferentes famílias de fontes, peso, tamanho, transformação de texto, espaçamento de letras e altura de linha.

Usage

Changing font family

Para alterar a família de fontes em todos os componentes, tudo o que você precisa fazer é substituir a--ig-font-family variável CSS:

:root {
  --ig-font-family: 'Helvetica Neue', sans-serif;
}

Changing type styles

Os estilos de tipo são usados internamente pela maioria dos componentes em Ignite UI for Blazor. Por exemplo, o igc-button componente usa o estilo de tipo de botão. Para alterar qualquer uma das propriedades de estilo de tipo, precisamos substituir a variável CSS correspondente:

:root {
  --ig-button-font-size: 22px;
  --ig-button-line-height: 26px;
  --ig-button-text-transform: lowercase;
}

Lembre-se de que isso atualizará os estilos de tipografia de botões globais. Se você quiser aplicar essas alterações a um botão específico, poderá usar um seletor de classe.

API References

• Typography