Trabalhando com a propriedade Font

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Nesse artigo vou comentar sobre a propriedade Font e dar algumas dicas legais para o cenário atual da Web

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:

Exemplos de uso da propriedade font

Figura 1. Exemplos de uso da propriedade font.

Um abraço e até o próximo artigo.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?