As 8 propriedade CSS para estilização de fontes e seus segredos

Prévia do material em texto

04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 1/14
Propriedades CSS para estilização de fontes
Publicado em: 11/12/2003 
Atualizações: 01/08/2005 - 17/05/2016
Introdução
As propriedades para estilização de fontes, de�nem os diferentes aspectos de
apresentação dos glifos (letras e caracteres) que compõem os conteúdos textuais dos
diferentes elementos da marcação HTML.
As propriedades básicas para estilizar fontes que serão estudadas neste tutorial são as
listadas a seguir:
 color:...........cor da fonte; 
 font-family:.....família (tipo) de fontes; 
 font-size:.......tamanho da fonte; 
 font-style:......estilo da fonte; 
 font-variant:....fontes maiúsculas de menor altura; 
 font-weight:.....peso da fonte; 
 font-stretch:....grau de espansão/contração dos glifos; 
 font:............maneira abreviada para declarar todas 
 as propriedades anteriores (exceto cor). 
Valores válidos para as propriedades da fonte
color:
                   PeçaPeça jájá
E você ainda ganha uma
capinha exclusiva
topo
https://www.maujor.com/
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 2/14
1. código hexadecimal: #ffc6d9
2. código rgb: rgb(255,235,0 )
3. código rgba: rgb(255,235,0, 0.7)
4. código hsl: hsl(210,100%,40%)
5. código hsla: hsla(155,80%,35%,0.4)
6. palavra-chave: red , blue , green ...etc
7. transparente: transparent
font-family:
1. nome da família de fonte: de�ne-se pelo nome da fonte, 
exemplos: "verdana", "helvetica", "arial", etc.
2. nome da família genérica: de�ne-se pelo nome genérico da fonte, 
exemplos: "serif", "sans-serif", "cursive", etc.
font-size:
1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large
8. smaller
9. larger
10. length: medida CSS de comprimento
exemplos: px, em, rem, % (porcentagem) ...
font-style:
1. normal: fonte normal (em pé)
2. italic: fonte inclinada
3. oblique: fonte obliqua
font-variant:
1. normal: fonte normal
2. small-caps: transforma em maiúsculas de menor altura
font-weight: (ver explicação em font-weight )
1. normal
2. bold
3. bolder
4. lighter
5. 100
6. 200
7. 300
8. 400
9. 500
10. 600
11. 700
12. 800
13. 900
font-stretch:
1. normal
topo
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 3/14
2. ultra-condensed
3. extra-condensed
4. condensed
5. semi-condensed
6. semi-expanded
7. expanded
8. extra-expanded
9. ultra-expanded
Vejamos a seguir alguns exemplos práticos de declarações para estilizar fontes.
color
<h1>Cabeçalho com letras vermelhas</h1>
<h2>Cabeçalho com letras verdes</h2>
<p>Parágrafo com letras azuis</p>
 h1 { color: red; } 
 h2 { color: #060; } 
 p { color: rgb(0,0,255); }
A seguir são mostrados os efeitos da estilização conforme os códigos anteriores
Cabeçalho com letras vermelhas
Cabeçalho com letras verdes
Parágrafo com letras azuis
font-family
<h2>Famílias por nomes: arial, helvetica, sans-serif;</h2>
<p>Família genérica: serif;<p>
HTML
CSS
HTML
CSS
topo
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 4/14
 h2 { font-family: arial, helvetica, sans-serif; } 
 p {font-family: serif;}
A seguir são mostrados os efeitos da estilização conforme os códigos anteriores
Famílias por nomes: arial, helvetica, sans-serif;
Família genérica: serif;
Notas: A propriedade font-family é usada para de�nir uma lista de família de fontes.
O navegador renderiza o primeiro nome de fonte que ele reconhece na lista e ignora os
demais.
Ao declarar famílias de fontes separe cada nome por uma vírgula e sempre declare por
último na lista o nome de fonte genérico daqueles que estão sendo declarados.
Se o nome da fonte for composto por mais de uma palavra, por exemplo: Comic Sans MS,
deve-se usar aspas duplas ou simples na gra�a do nome. Se for de�nido o atributo "style"
na marcação HTML (para estilização inline - evite isso), onde as aspas duplas já estão
presentes usar obrigatoriamente aspas simples na sintaxe para grafar o nome de fonte
composto.
font-size
<h1>Letras com tamanho: 14px</h1>
<h2>Letras com tamanho: smaller</h2>
<p>Letras com tamanho:100%</p>
 h1 { font-size: 16px; } 
 h2 { font-size: smaller; } 
 p { font-size: 100%; }
A seguir são mostrados os efeitos da estilização conforme os códigos anteriores
Letras com tamanho: 16px
Letras com tamanho: smaller
HTML
CSS
topo
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 5/14
Letras com tamanho:100%
font-style
<h1>Este é o estilo italic</h1>
<h2>Este é o estilo normal</h2>
<p>Este é o estilo oblique</p>
 h1 { font-style: italic; } 
 h2 { font-style: normal; } 
 p { font-style: oblique; }
A seguir são mostrados os efeitos da estilização conforme os códigos anteriores
Este é o estilo italic
Este é o estilo normal
Este é o estilo oblique
font-variant
<p>Este cabeçalho com letras normais</p>
<p>Este parágrafo com letras em "small-caps"</p>
 p1 { font-variant: normal; } 
 p2 { font-variant: small-caps; }
A seguir é mostrado os efeitos da estilização conforme os códigos anteriores
HTML
CSS
HTML
CSS
topo
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 6/14
Este cabeçalho com letras normais
ESTE PARÁGRAFO COM LETRAS EM "SMALL-CAPS"
font-weight
Esta propriedade CSS consagrou-se como sendo aquela destinada a obter o efeito
conhecido como "negrito" cuja �nalidade é realçar palavras de um texto, contudo, os
efeitos que ela causa vão muito além do simples negrito.
A tradução de font-weight é: "peso da fonte" e estas palavras foram usadas para dar
nome a uma propriedade CSS cujos valores de�nem o ... peso da fonte. 
Em tipogra�a peso da fonte tem um signi�cado muito mais amplo que simplesmente
negrito ou normal. Navegadores, por padrão, renderizam somente as fontes instaladas na
máquina do usuário e em geral tais fontes são instaladas somente nas suas versões
normal e bold . Assim, nós autores acabamos por acreditar que esta é a propriedade
para obter o efeito negrito.
Poucos se arriscavam a ler as "pesadas" especi�cações do W3C e quando o faziam de lá
saiam intrigados com a existência de valores para esta propriedade que são nomeados
por palavra-chave (como bolder e lighter) e por números (como 100, 500 e 900).
Se de�nirmos um valor diferente de bold (por exemplo: 200) o navegador "mapeia" o
valor para aquele mais próximo do valor 200 que esteja instalado na máquina do usuário
e que, em geral, é o valor normal .
Antes de mais nada é preciso entender o signi�cado de peso da fonte que em linguagem
desprovida de considerações técnicas avançadas signi�ca simplesmente o "grau de
escurecimento da fonte" e que tem relação, também, com a espessura dos glifos
(caracteres) da fonte.
As palavras-chave bolder e lighter de�nem um peso de fonte em tom mais escuro ou
menos escuro, respectivamente, que o peso da fonte herdada do elemento ascendente
mais próximo.
Atualmente é comum usar-se pacotes de fontes de terceiros, tal como os fornecidos pela
. Ao escolher um pacote de fontes a usar no site o desenvolvedor
tem a opção de baixar toda a faixa númerica e palavras-chave previstas para de�nir o
peso da fonte. Para se ter uma ideia, visite o link da API do Google, mostrado
anteriomente, e na interface que se abre acione o menu "Thickness" (espessura) existente
API do Google Fonts
topo
https://www.google.com/fonts
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php7/14
à esquerda da página e nele movimente o slider observando os pesos da fonte, tanto
numérico como em tom de escuro.
Resumindo: o uso de API de terceiros para inserir fontes no site possibilitou a que o autor
de�na com grande precisão o peso da fonte, estendendo seus horizontes para muito além
da dupla normal/bold normalmente instalada na máquina do usuário.
A listagem e a tabela mostradas a seguir foram transcritas da especi�cação do W3C e
complementam o que foi dito.
Os valores desta propriedade têm o seguinte signi�cado:
100 a 900
Cada número indica um peso de fonte mais escuro que o seu antecessor. A
correspondência de cada número com a palavra que de�ne o peso é aproximadamente
como mostrada a seguir:
100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Normal
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)
normal
equivalente a ‘400’.
bold
equivalente a ‘700’.
bolder
Mais escuro do que o valor herdado para o peso da fonte.
lighter
Mais claro do que o valor herdado para o peso da fonte.
bolder e lighter
O mapeamento dos valores bold e lighter é conforme mostrado na tabela a seguir:
Valor herdado bolder lighter
100 400 100
200 400 100
300 400 100
topo
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 8/14
Valor herdado bolder lighter
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700
Voltar ⇧
<p>Este é um parágrafo com glifos de peso bold</p>
<p>Este é um parágrafo com glifos de peso 700</p>
<p>Este é um parágrafo com glifos de peso 400</p>
<p>Este é um parágrafo com glifos de peso 900</p>
p1 { font-weight: bold; } 
 p2 { font-weight: 700; } 
 p3 { font-weight: 400; } 
 p4 { font-weight: 900; }
A seguir são mostrados os efeitos da estilização conforme os códigos anteriores
Este é um parágrafo com glifos de peso bold
Este é um parágrafo com glifos de peso 700
Este é um parágrafo com glifos de peso 400
Este é um parágrafo com glifos de peso 900
font-stretch
Tal como estudamos no item anterior para font-weight , aqui em geral somente os
valores condensed e expanded escontram-se instalados na máquina do usuário, porém
as API de terceiros para fontes fornecem pacotes com versões de fontes estilizadas
segundo os demais valores desta propriedade.
HTML
CSS
HTML topo
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 9/14
<p>Este é o estilo de fontes condensadas</p>
<p>Este é o estilo de fontes expandidas</p>
 p1 { font-stretch: condensed; } 
 p2 { font-stretch: expanded; }
A seguir são mostrados os efeitos da estilização conforme os códigos anteriores
Este é o estilo de fontes condensadas
Este é o estilo de fontes expandidas
font
Esta é a maneira abreviada de você declarar mais de uma propriedade para fonte.
A sintaxe geral é esta: font: [style] [variant] [weight] [font-stretch] size]
[/line-height] [family] | caption | icon | menu | message-box | small-caption
| status-bar | inherit
Você pode declarar todas ou algumas das propriedades.
Os valores size e family são obrigatórios quando se usa a declaração abreviada. Os
demais são facultativos e se você os omitir será adotado o valor padrão (inicial) ou o valor
herdado do elemento-pai.
Os valores style , variant , weight e size , podem ser declarados em qualquer
ordem.
<p>Parágrafo em declaração única</p>
 p { 
 font: italic small-caps bold 14px "Comic Sans MS", sans-serif;
}
CSS
HTML
CSS
topo
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 10/14
A seguir são mostrados os efeitos da estilização conforme os códigos anteriores
PARÁGRAFO EM DECLARAÇÃO ÚNICA
O valores caption , icon , menu , message-box , small-caption e status-bar
referem-se às fontes usadas pelo sistema operacional do visitante do site e devem ser
declarados isolados na propriedade font .
 caption.........fontes usadas nos botões; 
 icon............fontes usadas nos ícones; 
 menu............fontes usadas nos menus; 
 message-box.....fontes usadas nas caixas de mensagens; 
 small-caption...fontes usadas nos pequenos controles; 
 status-bar......fontes usadas na barra de status;
O valor inherit é usado para forçar a herança da fonte usada pelo elemento-pai e
também deve ser declarado isolados na propriedade font como mostrado a seguir.
<p class="p1">Parágrafo com fonte status-bar</p>
<p class="p2">Parágrafo com fonte inherit</p>
<p class="p3">Parágrafo com fonte small-caption</p>
 .p1 { font: status-bar; } 
 .p2 { font: inherit; } 
 .p3 { font: small-caption; }
A seguir são mostrados os efeitos da estilização conforme os códigos anteriores
Parágrafo com fonte status-bar
Parágrafo com fonte inherit
Parágrafo com fonte small-caption
Visite uma página interativa (abre em nova janela) onde você poderá fazer suas
experiências com a propriedade CSS font .
HTML
CSS
topo
https://www.maujor.com/tutorial/interativo/ifont.php
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 11/14
Conheça os livros do Maujor®
Ir para a .
Temas
Links patrocinados
Fundamentos CSS
Propriedades CSS
página de entrada nos sites dos livros
Navegação à esquerda
Navegação à direita
Blog do Maujor
Cursos de HTML, CSS e JavaScript na ALURA
Abreviando declarações CSS
Especi�cidade e efeito cascata
FAQ - CSS
FAQ - Web Standards
Guerra da Especi�cidade
Herança CSS
Introdução às CSS
Pseudoclasses e pseudoelementos
Regras CSS para cores
Sintaxe CSS
Tipos de folhas de estilos
Unidades de medidas CSS
Propriedade CSS background
Propriedade CSS border
Propriedade CSS border (formas geométricas)
Propriedade CSS display
Propriedade CSS font
topo
https://livrosdomaujor.com.br/
https://www.maujor.com/blog/
https://www.alura.com.br/cursos-online-front-end
https://www.maujor.com/tutorial/abreviacss.php
https://www.maujor.com/tutorial/especificidade.php
https://www.maujor.com/tutorial/faq.php
https://www.maujor.com/w3ctuto/faqwsp.html
https://www.maujor.com/tutorial/specificity_wars.php
https://www.maujor.com/tutorial/heranca-css.php
https://www.maujor.com/tutorial/intrtut.php
https://www.maujor.com/tutorial/guia-definitivo-das-pseudoclasses-e-pseudoelementos-css.php
https://www.maujor.com/tutorial/cores.php
https://www.maujor.com/tutorial/sintaxetut.php
https://www.maujor.com/tutorial/insetut.php
https://www.maujor.com/tutorial/unidades-de-medidas-css.php
https://www.maujor.com/tutorial/propriedade-css-para-estilizacao-de-background.php
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-bordas.php
https://www.maujor.com/tutorial/borderplay.php
https://www.maujor.com/tutorial/propriedade-css-display.php
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 12/14
CSS3
Interfaces interativas
Propriedade CSS height
Propriedade CSS hyphens
Propriedade CSS line-height
Propriedade CSS list
Propriedade CSS margin
Propriedade CSS object-fit
Propriedade CSS padding
Propriedade CSS text
Propriedade CSS width
Propriedade CSS will-change
Borda com imagem
Efeito de animação �ipping
Filtros CSS
Função CSS calc()
Gradientes lineares
Guia completo dos seletores CSS3
Módulo CSS3 para cores
Módulo Transition das CSS3
Shapes das CSS3
Shapes, clipping e masking
Variáveis CSS
Fonte interativo
Texto interativo
Borda interativo
Background interativo
Seletores interativo
Interface interativa CSS3
Interface interativa pseudo-classes para elementos-�lhos
topo
https://www.maujor.com/tutorial/propriedade-css-height.phphttps://www.maujor.com/tutorial/css3-propriedade-hyphens.php
https://www.maujor.com/tutorial/propriedade-css-line-height.php
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-listas.php
https://www.maujor.com/tutorial/propriedade-css-margin.php
https://www.maujor.com/tutorial/propriedade-css-object-fit.php
https://www.maujor.com/tutorial/propriedade-css-padding.php
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-textos.php
https://www.maujor.com/tutorial/propriedade-css-width.php
https://www.maujor.com/tutorial/propriedade-css-will-change.php
https://www.maujor.com/tutorial/css3-bordas-com-imagens.php
https://www.maujor.com/tutorial/criando-animacao-flipping-com-css.php
https://www.maujor.com/tutorial/css3-filters.php
https://www.maujor.com/tutorial/css3-funcao-css-calc.php
https://www.maujor.com/tutorial/css3-gradientes-lineares.php
https://www.maujor.com/tutorial/guia-completo-seletores-css3.php
https://www.maujor.com/tutorial/css3-modulo-para-cores.php
https://www.maujor.com/tutorial/css3-modulo-transition.php
https://www.maujor.com/tutorial/css-shapes.php
https://www.maujor.com/tutorial/css-shapes-clipping-and-masking.php
https://www.maujor.com/tutorial/propriedades-css-customizadas-modulo1.php
https://www.maujor.com/tutorial/ifont.php
https://www.maujor.com/tutorial/itext.php
https://www.maujor.com/tutorial/iborder.php
https://www.maujor.com/tutorial/iback.php
https://www.maujor.com/tutorial/isel.php
https://www.maujor.com/tutorial/interface-interativa-css3.php/
https://www.maujor.com/tutorial/pseudoclasses-para-elementos-filhos.php
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 13/14
Efeitos em links
Formulários
Web Design Responsivo
Artigos
Acessibilidade
Estilizando os 4 estados dos links
Estilos diferentes para links em uma mesma página
Estilização de caixas de busca
Elemento picture - imagens responsivas
Queries CSS para quantidades
Menu slider responsivo
Propriedade CSS width no RWD
CSS moderno explicado para dinossauros
Estilizando marcadores de listas ordenadas
Dicas para desenvolver CSS
Mais dicas para Folhas de Estilo
Alinhar imagens em textos
Seletores multi-classe
Centralizando com CSS
Âncoras versus botões
Layout com display: table
Dez exemplos de funcionalidades das ES6
Série de três artigos sobre formulários acessíveis
Leitores de tela e display:none
Tabelas acessíveis
Desenvolvendo AJAX acessível
Formulários acessíveis à prova de spam
Uso do JAWS para avaliar acessibilidade
Acessibilidade na HTML5
Acessibilidade na HTML5 com WAI-ARIA Roles
topo
https://www.maujor.com/tutorial/csslinks.php
https://www.maujor.com/tutorial/linkdif.php
https://www.maujor.com/tutorial/estilizando-caixas-de-busca.php
https://www.maujor.com/tutorial/elemento-picture-para-imagens-responsivas.php
https://www.maujor.com/tutorial/queries-css-para-quantidades.php
https://www.maujor.com/tutorial/menu-responsivo-em-slider-lateral.php
https://www.maujor.com/tutorial/propriedade-css-width-no-design-responsivo.php
https://www.maujor.com/tutorial/css-moderno-explicado-para-dinossauros.php
https://www.maujor.com/tutorial/estilizando-marcadores-de-listas-ordenadast.php
https://www.maujor.com/tutorial/csscribsheet.php
https://www.maujor.com/tutorial/dicascss.php
https://www.maujor.com/tutorial/alinhar-imagens-com-propriedade-vertical-align.php
https://www.maujor.com/tutorial/seletores-multi-classe.php
https://www.maujor.com/tutorial/centralizando-com-css-um-guia-completo.php
https://www.maujor.com/tutorial/ancoras-versus-botoes.php
https://www.maujor.com/tutorial/anti-heroi-css-display-table.php
https://www.maujor.com/tutorial/10-exemplos-de-funcionalidades-es6.php
https://www.maujor.com/tutorial/formac-a.php
https://www.maujor.com/tutorial/leitores-de-tela-display-none.php
https://www.maujor.com/tutorial/actables.php
https://www.maujor.com/tutorial/ajax-screen-readers.php
https://www.maujor.com/tutorial/spam-em-formularios.php
https://www.maujor.com/tutorial/usando-jaws-para-testes.php
https://www.maujor.com/tutorial/acessibilidade-na-html5.php
https://www.maujor.com/tutorial/melhorando-acessibilidade-na-html5-com-uso-de-wai-aria.php
04/10/2019 As 8 propriedade CSS para estilização de fontes e seus segredos
https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php 14/14
Museu do site
Matérias de autores convidados
Site criado em agosto de 2003 por [Maurício "Maujor®" Samy Silva] — Copyright © 2003-2019.
Escrevendo CSS com acessibilidade em mente
Escrevendo javascript com acessibilidade em mente
Visitar museu
QUERO SER UM AUTOR
Borda serrilhada com CSS3
Metatags X-UA Compatible e charset
O que é Full-Stack Developer
A propriedade CSS box-sizing
Escrevendo HTML semântico
Metodologia BEM
Como inserir vídeos com HTML5
Onde hospedar meu site
Variáveis nas CSS
Certi�cado SSL para seu site
topo
https://maujor.com/contato.php
https://twitter.com/maujor
https://www.facebook.com/maujor
https://plus.google.com/+MauricioMaujorSamySilva/posts
https://www.youtube.com/user/maujor1
https://www.maujor.com/rss.xml
https://www.maujor.com/contato.php
https://www.maujor.com/tutorial/escrevendo-css-com-acessibilidade-em-mente.php
https://www.maujor.com/tutorial/escrevendo-javascript-com-acessibilidade-em-mente.php
https://www.maujor.com/tutorial/conteudo-legado-no-site-do-maujor.php
https://www.maujor.com/autores/index.php
https://www.maujor.com/tutorial/borda-serrilhada-com-css.php
https://www.maujor.com/tutorial/meta-tags-x-ua-compatible-e-charset.php
https://www.maujor.com/tutorial/full-stack-developer.php
https://www.maujor.com/tutorial/propriedade-css-box-sizing.php
https://www.maujor.com/tutorial/escrevendo-html-semantico.php
https://www.maujor.com/tutorial/metodologia-bem-para-criar-codigo-legivel.php
https://www.maujor.com/tutorial/inserindo-videos-com-uso-da-html5.php
https://www.maujor.com/tutorial/sobre-hospedagem-de-sites.php
https://www.maujor.com/tutorial/variaveis-nas-css.php
https://www.maujor.com/tutorial/a-importancia-de-um-certificado-ssl-para-seu-site.php