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

    Por padrão, não aplicamos nenhum estilo tipográfico. Para usar nossa tipografia na sua aplicação, você precisa definir aig-typography classe CSS em um elemento de nível superior. Todas as crianças então usarão nossos estilos tipográficos.

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

    Ative os estilos tipográficos definindo aig-typography classe no elemento do corpo.

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

    Changing the Font Family

    Para alterar a família de fontes em todos os componentes, tudo o que você precisa fazer é sobrescrever a--ig-typography variável CSS por outro valor de família de fontes;

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

    Type Styles

    Os estilos de tipos são usados internamente pela maioria dos componentes em Ignite UI for Angular. Por exemplo, a documentação diz que o componente botão usa o estilo de tipo botão. Isso significa que podemos modificar a tipografia do componente button sobrescrevendo as variáveis CSS incluídas--ig-button-*.

    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.