Fontes CSS | Solução da API de Aspose.Font
O artigo tem como objetivo ensinar fontes HTML CSS e suas propriedades, representando exemplos de código como trabalhar com eles. Você aprenderá a tornar seu texto ousado ou semibold, a 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 da fonte CSS e a classificação comum das propriedades da fonte. Esses fundamentos são descritos em O que é a fonte? Artigo.
Fontes CSS
A fonte no CSS é um recurso que contém uma representação visual dos glifos. Para simplificar, possui informações que correspondem aos glifos com seus códigos.
Os recursos da fonte podem ser configurados localmente em um dispositivo no qual um navegador funciona. Para essas fontes que descrevem as informações podem ser obtidas diretamente no recurso de font (por exemplo, de um arquivo Montserrat.ttf). Para fontes da web, essas informações estão anexadas ao link no recurso da fonte.
Propriedades da fonte CSS
O CSS fornece várias propriedades de fonte para controlar a aparência e o comportamento das fontes nas páginas da web. Eles podem ser usados individualmente ou combinados para alcançar os efeitos da tipografia desejada no CSS. Nem todos eles são suportados por todos os navegadores, por isso é essencial considerar a compatibilidade entre navegadores ao usar essas propriedades. Vamos dar uma olhada em alguns (os mais usados) deles:
- Família da fonte;
- Espessura da fonte;
- Esticar fonte;
- Estilo da fonte;
- Tamanho da letra;
- Fonte;
- Síntese da fonte,
- Decoração do texto,
- Transformação do texto,
- Espaçamento entre letras,
- Altura da linha,
- Espaçamento entre palavras.
Família de fonte CSS
As fontes com o 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 a escolha do tipo de letra. É melhor notificar todas as variações das fontes de um tipo, porque é difícil prever se a fonte está disponível no computador do usuário ou não. Nesse caso, um navegador verificará sua presença, classificando as fontes notificadas uma a uma.
A propriedade da família da fonte CSS é herdada.
Na família CSS, a família tem os próximos valores:
- Nome da família Fonte (
Verdana,Montserrat,Courier). - Família genérica. Aqui você precisa observar um dos cinco tipos fontes: serif, sem serif, cursivo (igual a fontes de script), fantasia (igual a exibir fontes) ou monoespácia.
Initial- configura valores padrão.Herit- leva aos pais seus valores.
Exemplo de uso.
Lá, os próximos parâmetros são definidos no exemplo.
| Propriedade | Valor para texto 1 | Valor para texto 2 | Valor para texto 3 |
|---|---|---|---|
| font-family: | Lobster, Paisfico, cursiva; | Audiowide, fantasia; | Courier, monoespaçada; |
Sintaxe:
1// text 1
2.text1 {
3 font-family: Lobster, cursive;
4}
5// text 2
6.text2 {
7 font-family: Audiowide, fantasy;
8}
9// text 3
10.text3 {
11 font-family: Courier, monospace;
12}O resultado da aplicação será o próximo (observe que o tamanho da fonte e a cor foram os mesmos para todos os três textos no <body>)
Peso da fonte CSS
A propriedade de peso-fonte é responsável pela espessura das linhas de fonte.
A propriedade de peso da fonte CSS é herdada.
No HTML CSS, o peso da fonte pode ter os próximos valores:
Normal- é um valor padrão igual a 400.Bold- faz a semibolada da fonte. É igual ao peso de 700.Bolder- define o peso mais pesado do que o ancestral.mais leve- define o peso mais leve do que o ancestral.-100, 200, 300, 400, 500, 600, 700, 800, 900 ' - onde100’ faz a fonte mais leve, e `900 ’torna a fonte mais pesada (mais ousada).Initial- configura valores padrão.Herit- leva aos pais seus valores.
Exemplo de uso.
Vamos renderizar textos com os próximos parâmetros do peso da fonte.
| Propriedade | Valor para texto 1 | Valor para texto 2 | Valor para texto 3 |
|---|---|---|---|
| font-weight: | 900; | 500; | 200; |
Sintaxe:
1// text 1
2.text1 {
3 font-weight: 900;
4}
5// text 2
6.text2 {
7 font-weight: 500;
8}
9// text 3
10.text3 {
11 font-weight: 200;
12}O resultado da aplicação será assim (observe que o tamanho da fonte e a cor foram os mesmos para todos os três textos no <body>). Além disso, é importante lembrar que a fonte usada precisa ter as variações de peso necessárias. A maioria das fontes está disponível apenas nos pesos semi-bold e normal '. FONT SEgoe UI` usada no exemplo tem variações suficientes para o peso da fonte, para que o texto renderizasse em todos os valores definidos no exemplo.
CSS Font Stretch
Propriedade font-stretch permite escolher o tipo de letra normal, condensado ou expandido da família de fontes. Esta propriedade HTML CSS também não funciona para todas as fontes. Apenas algumas fontes especialmente projetadas que possuem tipos de letra de família com alongamentos variantes podem renderizar essa propriedade.
A propriedade CSS Font Stretch é herdada.
Os valores da estrech de fontes no CSS podem ser os próximos:
ultra-condensed- para a fonte mais condensada.extra-condensed- para a segunda fonte mais condensada.condensed- para uma fonte condensada.semi-condensed- para uma fonte ligeiramente condensada.normal- valor por defeito.semi-expanded- para uma fonte ligeiramente expandida.expanded- para um texto expandido.extra-expanded- para a segunda fonte mais expandida.ultra-expanded- para a fonte mais expandida.initial- define os valores por defeito.inherit- assume os valores da fonte pai.
Exemplo de uso.
Vamos renderizar textos com os próximos parâmetros do stretch de fonte.
| Propriedade | Valor para texto 1 | Valor para texto 2 | Valor para texto 3 |
|---|---|---|---|
| font-stretch: | condensed; | normal; | expanded; |
Sintaxe:
1// text 1
2.text1 {
3 font-stretch: condensed;
4}
5// text 2
6.text2 {
7 font-stretch: normal;
8}
9// text 3
10.text3 {
11 font-stretch: expanded;
12}O resultado da aplicação seria assim (observe que o tamanho da fonte e a cor foram os mesmos para todos os três textos no <body>).
Estilo de fonte CSS
Esta propriedade regula a inclinação da fonte.
A propriedade de estilo de fonte CSS é herdada.
A propriedade no estilo de fonte do HTML CSS pode ter os próximos valores:
normal- valor por defeito que define a inclinação normal da fonte.italic- marca o texto com a letra cursiva.oblique- define a inclinação da fonte (a fonte tem uma inclinação nas suas variações).initial- define os valores por defeito.inherit- recebe os valores da fonte pai.
Exemplo de uso.
Vamos renderizar textos com os próximos parâmetros do estilo de fonte.
| Propriedade | Valor para texto 1 | Valor para texto 2 | Valor para texto 3 |
|---|---|---|---|
| font-style: | normal; | italic; | oblique; |
Sintaxe:
1// text 1
2.text1 {
3 font-style: normal;
4}
5// text 2
6.text2 {
7 font-style: italic;
8}
9// text 3
10.text3 {
11 font-style: oblique;
12}O resultado da aplicação será assim (observe que o tamanho da fonte e a cor foram os mesmos para todos os três textos no <body>).
Você deve ter notado que os resultados para itálico 'e oblíqua’ parecem iguais. A resposta para isso é que o valor `oblíquo ‘funciona apenas quando a fonte tem um tipo de letra oblíqua e a fonte usada não possui uma.
Tamanho da fonte CSS
A propriedade define a altura dos glifos da fonte.
A propriedade de tamanho da fonte CSS é herdada.
O tamanho da fonte CSS tem os próximos valores:
- Tamanho absoluto - pode ser
xx-pequeno,x-pequeno,pequeno,médio,grande,x-grandeouxx-grande. O valor por defeito émédio. - Tamanho relativo - o tamanho em comparação com a fonte ancestral. Pode ser
menoroumaior. Pode tornar as fontes ainda maiores ou mais pequenas do que o tamanho absoluto permite. - Largura - é definida em pixéis (px) ou Ems (em). O EM é uma unidade escalável utilizada para documentos web. Um em é igual ao tamanho da letra atual. Se o tamanho da letra do documento for 14pt, então 1em é igual a 14pt. Em está dimensionado para que 2em seja igual a 28pt.
%- este valor relativo é calculado em comparação com a fonte ancestral. Permite fazer ajustes mais precisos no tamanho da letra CSS.- Largura da janela de visualização -
vw, permite que a fonte acompanhe o tamanho da janela do browser utilizado. Note que 1vw = 1% da largura da janela de visualização. Se a janela de visualização tiver 40 cm de largura, 1vw equivale a 0,4 cm. initial- define os valores por defeito.inherit- segue os valores do pai.
Exemplo de uso.
Lá, os próximos parâmetros estão definidos.
| Propriedade | Valor para texto 1 | Valor para texto 2 | Valor para texto 3 |
|---|---|---|---|
| font-size: | 7vw; | 70px; | 2em; |
Sintaxe:
1// text 1
2.text1 {
3 font-size: 7vw;
4}
5// text 2
6.text2 {
7 font-size: 70px;
8}
9// text 3
10.text3 {
11 font-size: 2em;
12}O resultado da aplicação será assim (observe que a família e a cor da fonte e da cor foram as mesmas para todos os três textos no <body>).
Fonte CSS
A propriedade CSS Font é usada para tornar o código mais curto. Com ele, é possível definir todas as outras propriedades da fonte em uma propriedade. Pode ser especificado as próximas propriedades:
font-style, font-variant, font-weight, font-stretch, font-size/line-height e font-family. Podem ainda ser incluídos valores da propriedade font-variant suportada pelo CSS 2.1 - normal ou small-caps. Consulte o parágrafo
Variante de fonte do artigo
O que é fonte? para obter mais informações sobre esta propriedade.
Exemplo de uso.
Lá, os próximos parâmetros estão definidos.
| Propriedade | Valor para texto 1 | Valor para texto 2 | Valor para texto 3 |
|---|---|---|---|
| font: | 6vw Arial; | 60pt Courier, monospace; | - |
Sintaxe:
1// text 1
2.text1 {
3 font: 6vw Arial;
4}
5// text 2
6.text2 {
7 font: 60pt Courier, monospace;
8}
9// text 3
10.text3 {
11}O resultado da aplicação desses parâmetros está na figura abaixo (observe que a cor é a mesma para os três textos no <body>). Como não definimos nenhum valores para o terceiro texto, ele foi renderizado nos parâmetros padrão.
Síntese da fonte CSS
Esta propriedade HTML CSS define se é permitido que os navegadores sintetizem estilos de fontes semibold ou oblíqua se estiverem ausentes na família de fontes. Portanto, se font-weight e font-estilo não forem especificados, os navegadores não devem sintetizar estilos semibold ou oblíqua.
A propriedade de síntese de fontes é herdada.
Para o parâmetro de síntese da fonte CSS, os próximos valores podem ser definidos:
none- proíbe a síntese.weighte/oustyle- podem ser sintetizadas propriedades observadas.initial- define valores por defeito.inherit- segue os valores do pai.
Exemplo de uso.
Lá, os próximos parâmetros estão definidos.
| Propriedade | Valor para texto 1 | Valor para texto 2 | Valor para texto 3 |
|---|---|---|---|
| font-synthesis: | weight; | style; | none; |
| font-weight: | 900; | - | 900; |
| font-style: | - | oblique; | oblique; |
Sintaxe:
1// text 1
2.text1 {
3 font-synthesis: weight;
4 font-weight: 900;
5}
6// text 2
7.text2 {
8 font-synthesis: style;
9 font-style: oblique;
10}
11// text 3
12.text3 {
13 font-synthesis: none;
14 font-weight: 900;
15 font-style: oblique;
16}O resultado da aplicação seria renderizado como é mostrado na próxima imagem (observe que a cor é a mesma para os três textos no <body>). À medida que definimos o valor nenhum para o terceiro texto, ele foi renderizado nos parâmetros padrão.
Fonte Stacks##
As pilhas de fontes se referem a uma lista de fontes definidas em folhas de estilo em cascata (CSS) usadas como opções de fallback se uma fonte específica estiver falhando ou ausente no dispositivo ou sistema de um usuário. Eles garantem que os designers da web possam manter a consistência na tipografia em diferentes plataformas e navegadores.
Para especificar famílias de fontes no CSS, é comum definir uma pilha de fontes, listando várias fontes em ordem de preferência. Se a primeira opção não estiver disponível, o navegador tenta usar o próximo na pilha até que uma opção de trabalho seja encontrada.
Vamos dar uma olhada em um exemplo de uma pilha de fontes para especificar famílias de fontes no CSS. Aqui, a fonte preferida da pilha é “Helvetica Neue”. Se não estiver disponível, a próxima opção julgada por um navegador será “Arial”. Se “Arial” também falhar, o navegador voltará à fonte genérica sem serrif.
1 Font-Family: "Helvetica Neue", Arial, Sans-Serif;Especificar uma família de fontes genéricas, como “Sans-Serif”, “Serif” ou “Monospace”, pois a última opção na pilha de fontes é considerada boa prática. Ele garante que o navegador sempre tenha uma fonte de fallback adequada para exibir caso nenhuma das fontes preferidas esteja disponível.
Fontes seguras para a Web
As fontes seguras à Web, também conhecidas como fontes do sistema ou fontes padrão, são uma coleção de fontes geralmente disponíveis em vários sistemas e dispositivos operacionais. Eles são considerados seguros para usar no web design, pois são amplamente suportados e provavelmente estarão presentes nos dispositivos dos usuários.
Nos primeiros dias do desenvolvimento da Web, os designers tinham opções de fonte limitadas devido à variabilidade na disponibilidade de fontes em diferentes sistemas. Como resultado, eles confiaram em um conjunto principal de fontes que foram amplamente instaladas na maioria dos computadores.
Aqui estão alguns exemplos de fontes famosas para a Web:
- Arial
- Helvética
- Times New Roman
- Geórgia
- Courier New
- Verdana
- Tahoma
- Trebuchet MS
Eles são frequentemente chamados de “fontes de fallback” e especificados nas pilhas de fontes porque são considerados uma escolha segura se uma fonte preferida não estiver disponível.
No entanto, com os avanços nas tecnologias da Web e o uso generalizado de fontes personalizadas por meio de serviços como Google Fontes e TypeKit, a dependência de fontes seguras na Web diminuiu. Agora, os designers da web têm mais flexibilidade e uma gama mais ampla de fontes para aprimorar o apelo visual de seus sites.
Como usar fontes externas no CSS?
Para usar fontes externas no CSS, você pode usar a regra @font-face. Ele permite especificar uma fonte personalizada e torná -la acessível à sua página da web. Vamos dar uma olhada em como você pode usar fontes externas no CSS:
- Obtenha os arquivos de fonte:
- Encontre os arquivos nos formatos desejados font como woff, woff2, ttf ou eot.
- Você pode obter os arquivos de fonte de um serviço de fonte, como o Google Fonts ou comprá -los/baixar de qualquer fonte confiável.
- Carregue os arquivos de fontes:
- Carregue os arquivos de fonte no seu servidor da Web ou em uma pasta designada em seu projeto.
- Defina a regra @font-face:
- Faça isso no seu arquivo CSS, para especificar o nome da família da fonte e fornecer o caminho para os arquivos de fontes, especifique o caminho para os arquivos da fonte e seus respectivos formatos. Inclua vários formatos para suportar diferentes navegadores.
Aqui está um exemplo dessa operação:
1 @font-face {
2 Fonte-família: 'mycustomfont';
3 SRC: URL ('Formato Path-to-Fonts/MyCustomfont.Woff2') ('woff2'),
4 URL ('Formato de caminho para fontes/mycustomfont.woff') ('woff');
5 / * Adicione formatos adicionais, se disponível */
6 }- Aplique a fonte: Quando você definiu a regra @font-face, você pode usar a fonte personalizada especificando a propriedade Font-Family em suas regras CSS, como no exemplo abaixo. Aqui, a fonte personalizada chamada ‘mycustomfont’ é aplicada ao elemento corporal. Se a fonte personalizada não estiver disponível, o navegador voltará a uma fonte genérica sem serrif.
1 body {
2 font-family: 'MyCustomFont', sans-serif;
3 }- Teste e verifique as páginas da Web em diferentes navegadores e dispositivos.
Algumas palavras sobre tipografia responsiva
A tipografia responsiva é a prática de projetar e implementar a tipografia em um site, para que ajuste e se adapte a diferentes tamanhos e dispositivos de tela. Envolve considerar fatores como tamanho da fonte, comprimento da linha e espaçamento para otimizar a experiência de leitura em diferentes tamanhos e orientações de tela.
Aqui estão alguns aspectos -chave da tipografia responsiva:
Em vez de usar tamanhos de fonte fixa, a tipografia responsiva emprega unidades relativas como porcentagens, EMs ou REMs para escalar textos proporcionalmente com base no tamanho da tela ou nas dimensões do Viewport.
A tipografia responsiva é frequentemente implementada juntamente com consultas de mídia, que permitem a adaptação dos estilos de fonte com base em larguras específicas da tela ou recursos do dispositivo. Isso permite ajustes tipográficos personalizados para diferentes pontos de interrupção.
As unidades de viewport CSS, como VW (largura de viewport) e VH (altura da viewport), são usadas para dimensionar fontes em relação às dimensões da viewport. Essa abordagem garante que os tamanhos das fontes se adaptem suavemente à medida que o usuário redimensiona a janela do navegador ou alterna entre os dispositivos.
A tipografia responsiva considera o comprimento ideal da linha (o número de caracteres por linha) para obter legibilidade. Linhas mais longas em telas maiores podem ser gerenciadas ajustando as margens ou aplicando larguras máximas. Além disso, a altura da linha (espaçamento vertical entre as linhas) é cuidadosamente considerado para evitar o texto apertado ou muito espaçado.
Com espaço de tela limitado em dispositivos menores, é importante estabelecer uma hierarquia tipográfica clara. Os designers precisam garantir que as manchetes, subtítulos e texto corporal sejam adequadamente diferenciados para facilitar a leitura.
Priorize a acessibilidade considerando as taxas de contraste entre texto e plano de fundo, fornecendo amplo espaçamento para os usuários com deficiências visuais e permitindo ajustes flexíveis de tamanho da fonte para acomodar diferentes preferências do usuário.
Conclusão
A fonte CSS é um dos principais blocos no desenvolvimento de interfaces com o CSS. A maior parte do conteúdo da maioria das páginas da Web é o conteúdo de texto; portanto, sem aprender essa propriedade, esse conteúdo nunca terá uma aparência de alta qualidade. Terá menos legibilidade, escalabilidade etc.
Algumas propriedades são fáceis de aplicar a qualquer fonte, mas algumas propriedades precisam de uma fonte especial que suporta a variação da propriedade. Assim como a fonte inconsolata tem 8 variações de peso-fonte quando a maioria das fontes só pode ser normal ou `negro ‘.
Se você tem em mente uma fonte que deseja usar, mas não a possui no seu dispositivo, pode tentar encontrá -lo e baixá -lo de um aplicativo Web gratuito da Aspose. Além disso,
Font Viewer fornecerá as informações necessárias sobre a fonte que você pode precisar ao desenvolver.