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 | 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.
Uso
Cambiar familia de fuentes
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;
}
css
Cambiar estilos de letra
Los estilos de tipo son utilizados internamente por la mayoría de los componentes de Ignite UI for Blazor. Por ejemplo, el igc-button
componente utiliza el estilo de tipo de botón. Para cambiar cualquiera de las propiedades de estilo de tipo, necesitamos sobrescribir la variable CSS correspondiente:
:root {
--ig-button-font-size: 22px;
--ig-button-line-height: 26px;
--ig-button-text-transform: lowercase;
}
css
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.
Referencias de API
Tipografía