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

    Por defecto no aplicamos ningún estilo tipográfico. Para usar nuestra tipografía en tu solicitud tienes que establecer laig-typography clase CSS en un elemento de nivel superior. Todos sus hijos usarán entonces nuestros estilos tipográficos.

    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"
/>

    Activa los estilos tipográficos configurando laig-typography clase sobre 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, solo tienes que sobrescribir la--ig-typography variable CSS con otro valor de familia de fuentes;

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

    Type Styles

    Los estilos de tipos se usan internamente por la mayoría de los componentes en Ignite UI for Angular. Por ejemplo, la documentación dice que el componente de botón usa el estilo de tipo de botón. Esto significa que podemos modificar la tipografía del componente botón sobrscribiendo 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.