Opa pessoal, nesse artigo vou comentar sobre a propriedade Font e dar algumas dicas legais para o cenário atual da Web.
A propriedade font é responsável por definir a formatação da(s) fonte(s) utilizada(s) na sua página HTML. Ela é dividida em 4 partes:
Font-style - Essa propriedade é usada para definir o estilo da fonte. Ela pode receber o valor normal, italic e oblique.
O modo normal deixa a fonte com o estilo padrão, o modo italic deixa a fonte em itálico e o modo oblique deixa a fonte obliquoa.
Css:
#elemento { font-style: italic; }
Font-variant - Com essa propriedade você pode alterar as variantes normal e small-caps. A normal como sempre é o formato default, enquanto o small-caps tem um uso meio confuso e que deve ser evitado.
Ele coloca todas as letras em maiúsculo, sendo as verdadeiramente maiúsculas um pouco maior. Poucas fontes aceitam bem essa propriedade e ela não é muito usada pelos desenvolvedores.
Css:
#elemento { font-variant: small-caps; }
Font-weight - Essa propriedade é responsável pela espessura da fonte. Ela pode receber os valores normal que a deixa com a espessura padrão, lighter que deixa a fonte mais fina (raramente funciona corretamente, deve ser evitado), bold que deixa a fonte em negrito e bolder que deixa ela mais realçada ainda (como o lighter, raramente funciona corretamente).
Você também pode definir um intervalo entre 100 e 900, sendo 400 o equivalente ao normal e 700 ao bold.
Css:
#elemento { font-weight: bold; }
Font-size - Através do font-size você pode regular o tamanho da fonte. As medidas adotados podem ser qualquer uma utilizada no css (px, em, %...).
Css:
#elemento { font-size: 24px; }
Font-family - O font-family define qual família de fonte você vai usar. O ideal é trabalhar com fontes conhecidas como Arial, Helvetica, Tahoma e etc. Ao utilizar o font-size o navegador vai procurar a fonte na máquina do usuário, logo não tente usar uma fonte muito específica para que o usuário não fique sem visualizar o site adequadamente.
Css:
#elemento { font-family: Arial; }
Essa propriedade aceita mais de uma valor, sendo a ordem de prioridade a mesma da declarada. Ex:
Css:
#elemento { font-family: Arial, Verdana, Helvetica; }
Nesse caso o browser vai procurar pela fonte Arial na máquina do usuário. Caso não ache ele vai tentar a Verdana e assim por diante.
Existe um recurso interessante para ser usado nos casos de projetos com fontes muito específicas, chamado de font-face. Com ele você pode passar a fazer referencia a uma fonte hospedada em um servidor.
Font-face - Para usar o font-face basta usar o seguinte código:
Css:
@font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
}
Pronto, a partir de agora você pode utilizar a font DeliciousRoman em qualquer lugar da sua página pois o navegador vai busca-la no servidor indicado no src.
O ideal é que você utilize mais de um src e trabalhe sempre com os formatos .eot (internet explorer) e .ttf (demais browsers).
Shorthand - Para finalizar, vou apresentar a maneira curta de declarar todas as propriedades de font.
Basta fazer a seguinte chamada:
Css:
#elemento { font: italic small-caps bold 12px/18px Arial, Helvetica, Verdana }
É importante ressaltar que essa ordem deve ser devidamente seguida:
Font-style - font-variant - font-weight - font-size/line-height - font-family
Todas as propriedades antes do font-size podem ser omitidas. Após ele o uso é obrigatório. Ex:
Css:
#elemento { font: 12px Arial; }
Observem também que apareceu um line-height que eu não havia comentado. Esse simplesmente define o espaçamento do texto, entre uma linha e outra. Caso não queira laterar esse espaçamento, você pode omitir essa propriedade simplesmente deixando de usar a barra e o valor dela.
Bom pessoal, acho que deu para ver bastante coisa sobre a propriedade font. Essa própriedade é bem antiga no Css e pode ser usado com tranquilidade em qualquer browser.
Uma dica a parte. Apesar de ser uma propriedade bem legal, evitem de usar muitas fontes diferentes na sua página. Tente sempre utilizar um padrão e evite usar mais do que 2 ou 3 familias de fonte para não deixar a página confusa.
Tentem sempre usar a forma shorthand da propriedade para economizar alguns bytes no seu Css e usem o font-face moderadamente, por questões de perfomance também.
Seguem exemplos de todas as propriedades listadas acima:
Figura 1. Exemplos de uso da propriedade font.
Um abraço e até o próximo artigo.
