A variante usual para a definição de fontes normalmente parece algo assim:
body {
font-family: Arial, Helvetica, sans-serif;
}Aqui, a fonte Arial é atribuída ao elemento body. Se esta não estiver disponível no sistema do visualizador, será usada a fonte Helvetica. Caso Helvetica também não esteja disponível, o navegador é instruído a utilizar pelo menos uma fonte sem serifa. Na realidade, isso não pode ser realmente controlado. Portanto, no final das contas, você não tem controle real sobre o resultado final. O que você configurou tão bem no GIMP ou Photoshop pode se perder na selva das fontes. Mais sobre como resolver esse problema será discutido a seguir.
Mas primeiramente voltando à variante clássica. Abaixo você encontrará uma definição típica que ajusta a aparência básica do site. Através da definição do body, você pode definir inicialmente as informações básicas de fonte.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Claro, agora você pode estilizar separadamente os elementos da página. Isso inclui, por exemplo, os títulos, passagens em itálico, etc. No entanto, lembre-se novamente do princípio de herança do CSS.
h1 {
font-size: 1.6em;
}O resultado no navegador poderá parecer assim:
Utilização de Webfonts
O problema com as definições de fontes convencionais é evidente: no final das contas, você não pode ter certeza de que a fonte especificada por você está realmente disponível para o visualizador. Os navegadores – caso não encontrem a fonte especificada por você – talvez escolham uma semelhante à desejada por você. Portanto, você não tem controle real sobre o resultado. É exatamente nesse ponto que o @font-face proporciona uma solução. Pois através dele é possível especificar explicitamente a fonte que deve ser utilizada. Isso funciona basicamente da mesma forma que com imagens. Portanto, é necessário especificar o caminho para o arquivo da fonte.
Nos navegadores modernos, são utilizadas as chamadas fontes da web WOFF para o @font-face. Essas fontes são significativamente menores do que os formatos de fonte da web utilizados anteriormente, EOT e TTF.
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
O nome da fonte a ser usada é definido em font-family. Até esse ponto, não há particularidades de sintaxe. Através de src:url(), é fornecido o URL onde o arquivo da fonte da web está localizado. Se existe a possibilidade teórica da fonte estar disponível nos computadores dos usuários, é recomendável especificar adicionalmente local. Aí, para o local, você deve atribuir o nome da fonte.
@font-face {
font-family: "Bitstream Vera Serif Bold";
local: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Depois da definição do @font-face, as fontes da web podem então ser usadas normalmente.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Aqui você pode encontrar as fontes da web, por exemplo
Agora surge a questão de onde obter os arquivos de fontes da web relevantes. O Google, por exemplo, hospeda muitas dessas fontes da web na página http://www.google.com/fonts.
Essas fontes podem ser incorporadas diretamente através da página mencionada.
Um chamado correspondente seria assim:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
No font-family, é indicada a fonte da web desejada. Na página do Google mencionada, você encontrará esses nomes e chamadas. Após incorporar a fonte da web, ela pode então ser aplicada como qualquer outra fonte.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Se desejar, você pode usar várias fontes da web em sua página. Para isso, na página http://www.google.com/fonts, clique nas fontes da web desejadas em Adicionar à Coleção. Quando todas as fontes da web estiverem em sua coleção, acesse Usar na parte inferior da página. Um tipo de medidor será exibido diretamente lá.
Através desta ilustração, é possível ver os efeitos que a incorporação das fontes da web têm no tempo de carregamento da página. Esses efeitos são realmente mensuráveis e aumentam com cada fonte da web adicional.
Como é fácil usar várias fontes da web que foram previamente adicionadas à sua coleção, mostra o exemplo a seguir:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
As diferentes fontes da web são listadas sequencialmente separadas por uma barra vertical. A chamada completa que corresponde à coleção escolhida é exibida na página de Utilização já mencionada.
Muitas das fontes da web oferecem subconjuntos como latim ou cirílico. Para incluí-los explicitamente, você deve especificar o subconjunto desejado como valor do parâmetro.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Se várias desses subconjuntos forem usados, você deve listá-los separados por vírgula.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
O uso dessas fontes da web, no entanto, não é consensual em um contexto bastante diferente. Primeiramente, ao carregar a página, é necessário estabelecer uma conexão com um servidor do Google. Isso pode ser evitado baixando o arquivo da fonte da web e carregando-o em seu próprio servidor. No entanto, em todos os casos, observe os termos de uso das fontes que deseja utilizar dessa forma.
Definição de fonte da página de exemplo
A seguir, você encontrará as definições de fonte que usarei para a página de exemplo atual:
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
Você pode incluir elementos adicionais conforme necessário. No caso atual, essa sintaxe é mais que suficiente.
