Tipografía en Ignite UI for Web Components

    La tipografía en Ignite UI for Web Components se basa en el Material Type System. 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 Bootstrap en Ignite UI for Web Components:

    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.

    Usage

    Changing font family

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

    Changing type styles

    Los estilos de letra se utilizan internamente en la mayoría de los componentes de Ignite UI for Web Components. Por ejemplo, el componente igc-button utiliza el estilo de tipo de botón. Para cambiar cualquiera de las propiedades de estilo de letra, necesitamos sobrescribir la variable CSS correspondiente:

    :root {
      --ig-button-font-size: 22px;
      --ig-button-line-height: 26px;
      --ig-button-text-transform: lowercase;
    }
    

    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.

    API References

    • Typography