Tipografía en Ignite UI for Web Components
La tipografía en Ignite UI for Web Components se basa en el Material Type System. Es no intrusivo y opcional, lo que le permite modificar los estilos de letra usando CSS únicamente.
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-* |
subtítulo | System Font | 400 | .75 rem | ninguno | 0.025 rem | 1 resto | --ig-caption-* |
sobrelínea | 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, Boostrap e Indigo) tendrá su propia escala de tipos. Todos comparten las mismas categorías de escala, pero pueden tener diferentes familias de fuentes, pesos, tamaños, transformaciones de texto, espacios entre letras y alturas de líneas.
Usage
Changing font family
Para cambiar la familia de fuentes en todos los componentes, todo lo que tienes que hacer es sobrescribir la variable CSS--ig-font-family
:
:root {
--ig-font-family: 'Helvetica Neue', sans-serif;
}
Changing type styles
Los estilos de letra se utilizan internamente en la mayoría de los componentes de Ignite UI for Web Components. Por ejemplo, el componente igc-button
utiliza el estilo de tipo de botón. Para cambiar cualquiera de las propiedades de estilo de letra, 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