Tipografía
La tipografía en Ignite UI for Angular se basa en el [Sistema de tipo de material] (https://material.io/design/typography/the-type-system.html#). 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 Material en Ignite UI for Angular:
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 | Clase CSS | Variables CSS |
---|---|---|---|---|---|---|---|---|
h1 | Telaraña de titilium | 300 | 6 rem | ninguno | -.09375 remoto | 7 remo | ig-typography__h1 |
--ig-h1-* |
h2 | Telaraña de titilium | 300 | 3,75 rem | ninguno | -.0312 remoto | 4,4375 remios | ig-typography__h2 |
--ig-h2-* |
h3 | Telaraña de titilium | 400 | 3 rem | ninguno | 0 | 3,5625 remios | ig-typography__h3 |
--ig-h3-* |
h4 | Telaraña de titilium | 400 | 2,125 remios | ninguno | .015625 remoto | 2,5 rem | ig-typography__h4 |
--ig-h4-* |
h5 | Telaraña de titilium | 400 | 1,5 rem | ninguno | 0 | 1,75 rem | ig-typography__h4 |
--ig-h5-* |
h6 | Telaraña de titilium | 600 | 1,25 rem | ninguno | .009375 remoto | 1,5 rem | ig-typography__h4 |
--ig-h6-* |
subtítulo-1 | Telaraña de titilium | 400 | 1 resto | ninguno | .009375 remoto | 1,5 rem | ig-typography__subtitle-1 |
--ig-subtitle-1-* |
subtítulo-2 | Telaraña de titilium | 600 | .875 remios | ninguno | .00625 rem | 1,5 rem | ig-typography__subtitle-2 |
--ig-subtitle-2-* |
cuerpo-1 | Telaraña de titilium | 400 | 1 resto | ninguno | .03125 remoto | 1,75 rem | ig-typography__body-1 |
--ig-body-1-* |
cuerpo-2 | Telaraña de titilium | 400 | .875 remios | ninguno | .015625 remoto | 1,25 rem | ig-typography__body-2 |
--ig-body-2-* |
botón | Telaraña de titilium | 600 | .875 remios | mayúscula | .046875 | 1 resto | ig-typography__button |
--ig-button-* |
subtítulo | Telaraña de titilium | 400 | .75 rem | ninguno | .025 remo | 1 resto | ig-typography__caption |
--ig-caption-* |
sobrelínea | Telaraña de titilium | 400 | .625 remios | mayúscula | .09375 remoto | 1 resto | ig-typography__overline |
--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
Important
De forma predeterminada, no aplicamos ningún estilo de tipografía. Para utilizar nuestra tipografía en su aplicación, debe configurar la clase CSS ig-typography
en un elemento de nivel superior. Todos sus hijos usarán nuestros estilos de tipografía.
Hemos seleccionado Titillium Web como fuente predeterminada para el tema Material en Ignite UI for Angular. Para usarlo tienes que alojarlo tú mismo o incluirlo desde Google Fonts:
<link
href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700"
rel="stylesheet"
/>
Habilite los estilos de tipografía configurando la clase ig-typography
en el elemento del cuerpo.
<!-- index.html -->
<body class="ig-typography">
<app-root></app-root>
</body>
Changing the Font Family
Para cambiar la familia de fuentes en todos los componentes, todo lo que tiene que hacer es sobrescribir la variable CSS--ig-typography
con otro valor de familia de fuentes;
/* styles.css */
:root {
--ig-font-family: "Open Sans", sans-serif;
}
Type Styles
Los estilos de letra se utilizan internamente en la mayoría de los componentes de Ignite UI for Angular. Por ejemplo, la documentación dice que el componente del botón usa el estilo de tipo de botón. Esto significa que podemos modificar la tipografía del componente del botón sobrescribiendo las variables CSS incluidas--ig-button-*
.
Digamos que queremos cambiar el texto del botón en el Tema Material para que siempre esté en minúsculas.
:root {
--ig-button-text-transform: lowercase;
}