Tipografía en Ignite UI for Blazor

    La tipografía de Ignite UI for Blazor se basa en el Sistema de tipos de materiales. 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 Bootstrap en Ignite UI for Blazor:

    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.

    Uso

    Cambiar familia de fuentes

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

    Cambiar estilos de letra

    Los estilos de tipo son utilizados internamente por la mayoría de los componentes de Ignite UI for Blazor. Por ejemplo, el igc-button componente utiliza el estilo de tipo de botón. Para cambiar cualquiera de las propiedades de estilo de tipo, necesitamos sobrescribir la variable CSS correspondiente:

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

    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.

    Referencias de API

    • Tipografía