Tipografía en Ignite UI for Blazor

La tipografía de Ignite UI for Blazor se basa en el Sistema de tipos de materiales. No es intrusivo y es opcional, lo que le permite modificar los estilos de tipo solo usando CSS.

Descripción general

El sistema de tipos es una escala de tipos que consta de 13 estilos de tipos de categorías diferentes que se utilizan en la mayoría de los componentes. Todas las categorías de básculas son completamente reutilizables y ajustables por el usuario final.

Aquí hay una lista de los 13 estilos de categoría definidos para el tema Bootstrap en Ignite UI for Blazor:

Categoría de escala	Familia tipográfica	Peso de fuente	Tamaño de fuente	Transformación de texto	Espaciado de letras	Altura de la línea	**CSS Variables*-
**h1*-	System Font	500	2,5 rem	ninguno	-0.09375 rem	3 rem	--ig-h1-*
**h2*-	System Font	500	2 rem	ninguno	-0.0312 rem	2.4 rem	--ig-h2-*
**h3*-	System Font	500	1,75 rem	ninguno	0	2.1 rem	--ig-h3-*
**h4*-	System Font	500	1,5 rem	ninguno	0.015625 rem	1.8 rem	--ig-h4-*
**h5*-	System Font	500	1,25 rem	ninguno	0	1,5 rem	--ig-h5-*
**h6*-	System Font	500	1 resto	ninguno	0.009375 rem	1.2 rem	--ig-h6-*
**subtitle-1*-	System Font	400	.875 remios	ninguno	0.009375 rem	1,5 rem	--ig-subtitle-1-*
**subtitle-2*-	System Font	400	.9 rem	ninguno	0.00625 rem	1.35 rem	--ig-subtitle-2-*
**body-1*-	System Font	400	1 resto	ninguno	0.03125 rem	1,5 rem	--ig-body-1-*
**body-2*-	System Font	400	.9 rem	ninguno	0.015625 rem	1,5 rem	--ig-body-2-*
**button*-	System Font	500	1 resto	ninguno	0.046875 rem	1,5 rem	--ig-button-*
**caption*-	System Font	400	.75 rem	ninguno	0.025 rem	1 resto	--ig-caption-*
**overline*-	System Font	400	.625 remios	mayúscula	0.09375 rem	1 resto	--ig-overline-*

Cada tema define su propia escala tipográfica. Esto significa que cada uno de los temas que lanzamos - Material, Fluent, Bootstrap e Indigo - tendrá su propia escala tipográfica. Todas comparten las mismas categorías de escala, pero pueden tener diferentes familias de fuentes, grosores, tamaños, transformaciones de texto, espaciado entre letras y altura de línea.

Usage

Changing font family

To change the font family in all components, all you have to do is overwrite the --ig-font-family CSS variable:

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

Changing type styles

The type styles are used internally by most of the components in Ignite UI for Blazor. For instance, the igc-button component uses the button type style. To change any of the type style properties, we need to overwrite the corresponding CSS variable:

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

Tenga en cuenta que esto actualizará los estilos de tipografía de los botones globales. Si desea aplicar estos cambios a un botón específico, puede utilizar un selector de clases.

API References

• Typography