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;
}

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.