Tipografía

    La tipografía en Ignite UI for Angular se modela a partir del [Sistema de tipos de materiales](https://material.io/design/typography/the-type-system.html#). 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 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, 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

    Important

    By default we don't apply any typography styles. To use our typography in your application you have to set the ig-typography CSS class on a top-level element. All of its children will then use our typography styles.

    Hemos seleccionado Titillium Web para que sea la 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"
/>

    Enable the typography styles by setting the ig-typography class on the body element.

    <!-- index.html -->
<body class="ig-typography">
  <app-root></app-root>
</body>

    Changing the Font Family

    To change the font family in all components, all you have to do is overwrite the --ig-typography CSS variable with another font-family value;

    /* styles.css */
:root {
    --ig-font-family: "Open Sans", sans-serif;
}

    Type Styles

    The type styles are used internally by most of the components in Ignite UI for Angular. For instance, the documentation says the button component uses the button type style. This means that we can modify the typography of the button component by overwriting the included --ig-button-* CSS variables.

    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.