Tipografía en Ignite UI for Web Components

La tipografía de Ignite UI for Web Components 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 Web Components:

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	**Variables CSS*-
**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-*
**subtítulo-1*-	System Font	400	.875 remios	ninguno	0.009375 rem	1,5 rem	--ig-subtitle-1-*
**subtítulo-2*-	System Font	400	.9 rem	ninguno	0.00625 rem	1.35 rem	--ig-subtitle-2-*
**cuerpo-1*-	System Font	400	1 resto	ninguno	0.03125 rem	1,5 rem	--ig-body-1-*
**cuerpo-2*-	System Font	400	.9 rem	ninguno	0.015625 rem	1,5 rem	--ig-body-2-*
**botón*-	System Font	500	1 resto	ninguno	0.046875 rem	1,5 rem	--ig-button-*
**pie de foto*-	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

Para cambiar la familia de fuentes en todos los componentes, solo tienes que sobrescribir la--ig-font-family variable CSS:

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

Changing type styles

Los estilos de tipos se usan internamente por la mayoría de los componentes en Ignite UI for Web Components. Por ejemplo, eligc-button componente utiliza el estilo de tipo botón. Para cambiar cualquiera de las propiedades del estilo de tipos, necesitamos sobrescribir la variable CSS correspondiente:

: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