logo
Helpful resources ▼
  Nuget   Pricing   Buy

Fontes CSS | Aspose.Font para .NET

Este artigo tem como objetivo ensinar sobre fontes no HTML/CSS e suas propriedades, apresentando exemplos de código sobre como trabalhar com elas. Você aprenderá como tornar seu texto negrito ou seminegrito, como alterar o tamanho da fonte ou a família de fontes no CSS e muito mais.

Você também verá a diferença entre as propriedades de fonte do CSS e a classificação comum das propriedades de fonte. Esses fundamentos são descritos no artigo O que é fonte?.

Fontes CSS

A fonte no CSS é um recurso que contém uma representação visual dos glifos. Simplificando, ela possui informações que mapeiam os glifos aos seus respectivos códigos.

Os recursos de fonte podem ser configurados localmente em um dispositivo no qual o navegador funciona. Para essas fontes, as informações podem ser obtidas diretamente do recurso (por exemplo, de um arquivo Montserrat.ttf). Para fontes da web (web fonts), essas informações são vinculadas através de um link para o recurso da fonte.

Propriedades de fonte CSS

O CSS fornece várias propriedades de fonte para controlar a aparência e o comportamento das fontes em páginas da web. Elas podem ser usadas individualmente ou combinadas para alcançar os efeitos tipográficos desejados. Nem todas são suportadas por todos os navegadores, por isso é essencial considerar a compatibilidade entre navegadores ao utilizá-las.

Vamos dar uma olhada em algumas das propriedades mais usadas:

Família de fonte CSS (font-family)

Fontes com um design comum geralmente são agrupadas em uma família de fontes. Dentro da família, os glifos podem variar em largura, inclinação ou peso.

A propriedade CSS font-family é usada para escolher o tipo de letra. É recomendável especificar todas as variações das fontes de um tipo, pois é difícil prever se a fonte específica está disponível no computador do usuário. Nesse caso, o navegador verificará a presença das fontes listadas, uma a uma, até encontrar uma disponível.

A propriedade font-family é herdada.

No CSS, a propriedade font-family aceita os seguintes valores:

Exemplo de uso:

No exemplo abaixo, os seguintes parâmetros são definidos:

PropriedadeValor para texto 1Valor para texto 2Valor para texto 3
font-family:Lobster, Pacifico, cursive;Audiowide, fantasy;Courier, monospace;

Sintaxe:

 1// texto 1 
 2.text1 {
 3    font-family: Lobster, cursive;
 4}
 5// texto 2 
 6.text2 {
 7    font-family: Audiowide, fantasy;
 8}
 9// texto 3 
10.text3 {
11    font-family: Courier, monospace;
12}

O resultado da aplicação será o seguinte (observe que o tamanho da fonte e a cor foram os mesmos para os três textos no <body>):

Texto renderizado em diferentes famílias de fontes CSS

Peso da fonte CSS (font-weight)

A propriedade font-weight é responsável pela espessura das linhas da fonte.

A propriedade font-weight é herdada.

No HTML/CSS, o font-weight pode ter os seguintes valores:

Exemplo de uso:

Vamos renderizar textos com os seguintes parâmetros de font-weight:

PropriedadeValor para texto 1Valor para texto 2Valor para texto 3
font-weight:900;500;200;

Sintaxe:

 1// texto 1 
 2.text1 {
 3    font-weight: 900;
 4}
 5// texto 2 
 6.text2 {
 7    font-weight: 500;
 8}
 9// texto 3 
10.text3 {
11    font-weight: 200;
12}

O resultado da aplicação será este (com tamanho e cor idênticos para os três textos). É importante lembrar que a fonte utilizada deve possuir as variações de peso necessárias. A maioria das fontes está disponível apenas nos pesos normal e bold (ou semi-bold). A fonte Segoe UI usada no exemplo possui variações suficientes para que o texto seja renderizado corretamente em todos os valores definidos.

Texto renderizado em diferentes pesos de fonte CSS

Alongamento de fonte CSS (font-stretch)

A propriedade font-stretch permite escolher entre os tipos normal, condensado ou expandido da família de fontes. Esta propriedade também não funciona para todas as fontes; apenas fontes especialmente projetadas que possuem variações de largura na família podem renderizar essa propriedade.

A propriedade font-stretch é herdada.

Os valores de font-stretch no CSS podem ser:

Exemplo de uso:

Vamos renderizar textos com os seguintes parâmetros de font-stretch:

PropriedadeValor para texto 1Valor para texto 2Valor para texto 3
font-stretch:condensed;normal;expanded;

Sintaxe:

 1// texto 1 
 2.text1 {
 3    font-stretch: condensed;
 4}
 5// texto 2 
 6.text2 {
 7    font-stretch: normal;
 8}
 9// texto 3 
10.text3 {
11    font-stretch: expanded;
12}

O resultado será o seguinte:

Texto renderizado com diferentes alongamentos de fonte CSS

Estilo de fonte CSS (font-style)

Esta propriedade regula a inclinação da fonte.

A propriedade font-style é herdada.

A propriedade font-style pode ter os seguintes valores:

Exemplo de uso:

Vamos renderizar textos com os seguintes parâmetros de font-style:

PropriedadeValor para texto 1Valor para texto 2Valor para texto 3
font-style:normal;italic;oblique;

Sintaxe:

 1// texto 1 
 2.text1 {
 3    font-style: normal;
 4}
 5// texto 2 
 6.text2 {
 7    font-style: italic;
 8}
 9// texto 3 
10.text3 {
11    font-style: oblique;
12}

O resultado será este:

Texto renderizado em diferentes estilos de fonte CSS

Você pode notar que os resultados para italic e oblique parecem iguais. Isso ocorre porque o valor oblique funciona plenamente apenas quando a fonte possui uma variação oblíqua específica; caso contrário, o navegador pode aplicar uma inclinação simulada semlhante ao itálico.

Tamanho da fonte CSS (font-size)

Esta propriedade define a altura dos glifos da fonte.

A propriedade font-size é herdada.

O font-size aceita os seguintes valores:

Exemplo de uso:

No exemplo abaixo, os seguintes parâmetros são definidos:

PropriedadeValor para texto 1Valor para texto 2Valor para texto 3
font-size:7vw;70px;2em;

Sintaxe:

 1// texto 1 
 2.text1 {
 3    font-size: 7vw;
 4}
 5// texto 2 
 6.text2 {
 7    font-size: 70px;
 8}
 9// texto 3 
10.text3 {
11    font-size: 2em;
12}

Resultado:

Texto renderizado em diferentes tamanhos de fonte CSS

Propriedade abreviada CSS (font)

A propriedade CSS font é usada para tornar o código mais curto, permitindo definir várias propriedades relacionadas à fonte em uma única linha. As propriedades que podem ser especificadas são: font-style, font-variant, font-weight, font-stretch, font-size/line-height e font-family. Valores de font-variant como normal ou small-caps também podem ser incluídos. Para mais detalhes sobre small-caps, consulte o parágrafo Variante de fonte no artigo O que é fonte?.

Exemplo de uso:

PropriedadeValor para texto 1Valor para texto 2Valor para texto 3
font:6vw Arial;60pt Courier, monospace;-

Sintaxe:

 1// texto 1 
 2.text1 {
 3    font: 6vw Arial;
 4}
 5// texto 2 
 6.text2 {
 7    font: 60pt Courier, monospace;
 8}
 9// texto 3 
10.text3 {
11}

O resultado está na imagem abaixo. Como não definimos valores para o terceiro texto, ele foi renderizado com os parâmetros padrão.

Texto renderizado com a propriedade abreviada CSS font

Síntese de fonte CSS (font-synthesis)

Esta propriedade define se os navegadores têm permissão para sintetizar estilos de negrito ou oblíquo caso eles estejam ausentes na família de fontes. Se font-weight ou font-style não estiverem presentes no arquivo da fonte, o navegador pode “simulá-los” a menos que esta propriedade proíba.

A propriedade font-synthesis é herdada.

Valores aceitos:

Exemplo de uso:

PropriedadeValor para texto 1Valor para texto 2Valor para texto 3
font-synthesis:weight;style;none;
font-weight:900;-900;
font-style:-oblique;oblique;

Sintaxe:

 1// texto 1 
 2.text1 {
 3    font-synthesis: weight;
 4    font-weight: 900;
 5}
 6// texto 2 
 7.text2 {
 8    font-synthesis: style;
 9    font-style: oblique;
10}
11// texto 3 
12.text3 {
13    font-synthesis: none;
14    font-weight: 900;
15    font-style: oblique;
16}

O resultado será renderizado conforme mostrado abaixo. Como definimos none para o terceiro texto, o navegador não sintetizou os estilos solicitados.

Texto renderizado com diferentes valores de síntese de fonte CSS

Pilhas de fontes (Font Stacks)

Pilhas de fontes (font-stacks) referem-se a uma lista de fontes definida no CSS usada como opções de reserva (fallbacks) caso uma fonte específica falhe ou esteja ausente no dispositivo do usuário. Elas garantem que designers possam manter a consistência tipográfica em diferentes plataformas e navegadores.

Para especificar famílias de fontes, é comum definir uma pilha de fontes listando várias delas em ordem de preferência. Se a primeira não estiver disponível, o navegador tenta a próxima, e assim por diante.

Veja um exemplo: aqui a fonte preferencial é “Helvetica Neue”. Se ela não estiver disponível, o navegador tentará “Arial”. Se “Arial” também falhar, o navegador usará a fonte genérica sans-serif.

1    font-family: "Helvetica Neue", Arial, sans-serif;

Especificar uma família genérica (sans-serif, serif ou monospace) como a última opção da pilha é considerada uma boa prática, garantindo que o navegador sempre tenha uma alternativa adequada.

Fontes seguras para a Web (Web-safe fonts)

Fontes seguras para a Web, também conhecidas como fontes de sistema ou padrão, são uma coleção de fontes geralmente disponíveis em diversos sistemas operacionais e dispositivos. Elas são consideradas seguras para design web por serem amplamente suportadas.

Nos primórdios do desenvolvimento web, as opções eram limitadas e os designers dependiam de um conjunto central de fontes instaladas na maioria dos computadores.

Exemplos de fontes seguras:

No entanto, com o avanço tecnológico e o uso de fontes personalizadas (Google Fonts, Adobe Fonts, etc.), a dependência de fontes seguras diminuiu, oferecendo mais flexibilidade visual aos designers.

Como usar fontes externas no CSS?

Para usar fontes externas, você utiliza a regra @font-face. Ela permite especificar uma fonte personalizada e torná-la acessível em sua página. Veja como fazer:

  1. Obtenha os arquivos da fonte:

    • Encontre os arquivos nos formatos desejados, como WOFF, WOFF2, TTF ou EOT.
    • Você pode obtê-los em serviços como Google Fonts ou baixá-los de fontes confiáveis.

  2. Carregue os arquivos:

    • Faça o upload para o seu servidor web ou uma pasta do seu projeto.

  3. Defina a regra @font-face:

    • No seu arquivo CSS, especifique o nome da família e o caminho para os arquivos, incluindo múltiplos formatos para suporte a diferentes navegadores.

Exemplo:

1    @font-face {
2        font-family: 'MinhaFontePersonalizada';
3        src: url('caminho/minha-fonte.woff2') format('woff2'),
4             url('caminho/minha-fonte.woff') format('woff');
5        /* Adicione outros formatos se disponíveis */
6    }
  1. Aplique a fonte:
    • Após definir @font-face, você pode usar o nome escolhido na propriedade font-family. Se a fonte personalizada falhar, o navegador usará a alternativa genérica.
1    body {
2        font-family: 'MinhaFontePersonalizada', sans-serif;
3    }
  1. Teste e verifique em diferentes navegadores e dispositivos.

Algumas palavras sobre tipografia responsiva

A tipografia responsiva é a prática de projetar e implementar a tipografia de um site para que ela se adapte a diferentes tamanhos de tela e dispositivos. Isso envolve ajustar fatores como tamanho da fonte, comprimento da linha e espaçamento.

Aspectos fundamentais:

Conclusão

As propriedades de fonte CSS são blocos fundamentais no desenvolvimento de interfaces. Como a maior parte do conteúdo web é textual, dominar essas propriedades é essencial para garantir uma aparência de alta qualidade, boa legibilidade e escalabilidade.

Algumas propriedades funcionam facilmente com qualquer fonte, mas outras exigem fontes que suportem variações específicas. Por exemplo, a fonte Inconsolata possui 8 variações de peso, enquanto outras podem ter apenas normal e bold.

Se você precisa de uma fonte mas não a tem instalada, pode tentar encontrá-la e baixá-la usando aplicativos gratuitos da Aspose. Além disso, o Font Viewer fornece informações técnicas detalhadas que podem ser úteis durante o seu desenvolvimento.

O que são glifos Formatos de fonte

Have any questions about Aspose.Font?



Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2026. All Rights Reserved.