Tipografia

    A tipografia no Ignite UI for Angular é modelada após o [Material Type System](https://material.io/design/typography/the-type-system.html#). Ela é não intrusiva e opcional, permitindo que você modifique os estilos de tipo usando apenas CSS.

    Visão geral

    O sistema de tipos é uma escala de tipos que consiste em 13 estilos de tipos de categorias diferentes usados na maioria dos componentes. Todas as categorias de escala são completamente reutilizáveis e ajustáveis pelo usuário final.

    Aqui está uma lista de todos os 13 estilos de categoria definidos para o tema Material no Ignite UI for Angular:

    Categoria de escala Família de fontes Peso da fonte Tamanho da fonte Transformação de texto Espaçamento entre letras Altura da linha Classe CSS Variáveis CSS
    h1 Titillium Web 300 6 restos nenhum -.09375 rem 7 restos ig-typography__h1 --ig-h1-*
    h2 Titillium Web 300 3,75 reais nenhum -.0312 rem 4,4375 reais ig-typography__h2 --ig-h2-*
    h3 Titillium Web 400 3 restos nenhum 0 3,5625 reais ig-typography__h3 --ig-h3-*
    h4 Titillium Web 400 2.125 reais nenhum .015625 reais 2,5 rem ig-typography__h4 --ig-h4-*
    h5 Titillium Web 400 1,5 rem nenhum 0 1,75 reais ig-typography__h4 --ig-h5-*
    h6 Titillium Web 600 1,25 reais nenhum .009375 reais 1,5 rem ig-typography__h4 --ig-h6-*
    legenda-1 Titillium Web 400 1 resto nenhum .009375 reais 1,5 rem ig-typography__subtitle-1 --ig-subtitle-1-*
    legenda-2 Titillium Web 600 .875 rem nenhum .00625 reais 1,5 rem ig-typography__subtitle-2 --ig-subtitle-2-*
    corpo-1 Titillium Web 400 1 resto nenhum .03125 reais 1,75 reais ig-typography__body-1 --ig-body-1-*
    corpo-2 Titillium Web 400 .875 rem nenhum .015625 reais 1,25 reais ig-typography__body-2 --ig-body-2-*
    botão Titillium Web 600 .875 rem maiúsculas .046875 1 resto ig-typography__button --ig-button-*
    rubrica Titillium Web 400 .75 rem nenhum .025 rem 1 resto ig-typography__caption --ig-caption-*
    sobrelinha Titillium Web 400 .625 rem maiúsculas .09375 rem 1 resto ig-typography__overline --ig-overline-*

    Cada tema define sua própria escala de tipos. Isso significa que cada um dos temas que enviamos - Material, Fluent, Bootstrap e Indigo - terá sua própria escala de tipos. Todas compartilham as mesmas categorias de escala, mas podem ter famílias de fontes, peso, tamanho, transformação de texto, espaçamento das letras e altura de linha diferentes.

    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.

    Selecionamos Titillium Web para ser a fonte padrão para o Material Theme no Ignite UI for Angular. Para usá-lo, você precisa hospedá-lo você mesmo ou incluí-lo do 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 alterar o texto do botão no Material Theme para que fique sempre em letras minúsculas.

    :root {
    --ig-button-text-transform: lowercase;
}

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.