Como usar fontes diferentes na web

Como usar fontes diferentes com CSS

Até bem pouco tempo, só era possível usar na web as fontes padrões, ou seja, as fontes que se sabia que já estavam instaladas na maioria dos computadores. Isso reduzia a web a um número muito pequeno de fontes. Poucas variações eram possíveis. Agora isso acabou.

Use a fonte que vc quiser. Sendo de boa qualidade e free, é claro.

No Arquivo CSS coloque:

@font-face {
font-family: "nome da fonte";
src: url("http://end_do_site/fontes/nome_da_fonte.eot"); /* para IE */
src: local("nome da fonte"), url("http://end_do_site/fontes/nome_da_fonte.ttf") format("truetype");
}

*{ font-family: "nome da fonte", Arial, sans-serif; }

---

Se a fonte tiver um nome formado por uma única palavra, ou palavras unidas por hifens, não há necessidade das aspas:

@font-face {
font-family: nome_da_fonte ;
src: url("http://end_do_site/fontes/nome_da_fonte.eot"); /* para IE */
src: local("nome da fonte"), url("http://end_do_site/fontes/nome_da_fonte.ttf") format("truetype");
}

*{ font-family: nome_da_fonte, Arial, sans-serif; }

---

Se vc não quiser usar a fonte diferente em tudo é só não usar o *.
Por exemplo, usar a fonte diferente só nos títulos:

h1, h2, h3 { font-family: nome_da_fonte, Arial, sans-serif; }

---

Se a fonte q vc quer usar não for truetype (.ttf), é só trocar a especificação.

String	Font Format	Common extensions
“truetype”	TrueType	.ttf
“opentype”	OpenType	.ttf, .otf
“truetype-aat”	TrueType with Apple Advanced Typography extensions	.ttf
“embedded-opentype”	Embedded OpenType	.eot
“svg”	SVG Font	.svg, .svgz

Por exemplo, quero usar a fonte nomeA.otf

@font-face {
font-family: nomeA ;
src: url("http://end_do_site/fontes/nomeA.eot"); /* para IE */
src: local("nome da fonte"), url("http://end_do_site/fontes/nomeA.otf") format("opentype");
}

*{ font-family: nome_da_fonte, Arial, sans-serif; }

----

Supondo q vc não tenha a versão .eot da fonte, necessária para o IE, use a versão q vc tem e converta.
Nesses sites vc consegue converter facilmente:

http://ttf2eot.sebastiankippe.com/
http://www.conversoes.org/

Abandonando as antigas tabelas.

Para quem ainda trabalha construindo sites com tabelas ou para quem está começando e querendo saber mais sobre CSS, padrões web e Tableless. Vale a pena conferir.

Tableless e tabelas

"Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página, pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares." Wikipedia

Ou seja, tableless não é ausência total de tabelas. Devemos usar cada tag para o que esta foi criada. Se tenho dados tabulares, devemos usar tabela. E a página será validada pelo padrões W3C, sim.

Detalhe importante: O título da tabela deve ficar na tag capition. Infelizmente, é raro vermos isso. Geralmente está em uma tag p ou span ou mesmo como um subtítulo. E ainda que esteja na primeira linha da tabela, este não é o lugar correto. Sempre imagine que um cego gostaria de ter acesso a seu site através de softwares que lêem o conteúdo das páginas em voz alta. Se o título da tabela não estiver na tag capition, não será lido como título da tabela, e o cego ficará confuso.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplo de tabela </title>

<style>
table {
background-color:#F9ECD0;
font:12px Arial, Helvetica, sans-serif;
color:#310000;
border:double 3px;
text-align:center;
}

caption {
font-size:14px;
text-align:left;
}

th {
background-color:#E4CAAF;
font-weight:bold;
border:none;
border-bottom:#660000 solid 1px;
width:120px;
height:25px;
vertical-align:middle;
}

td {
border:none;
border-bottom:#660000 dotted 1px;
height:20px;
}
</style>
</head>

<body>

<table>
<caption>
- Título da tabela
</caption>

<tr>
<th>Título da coluna A </th>
<th>Título da coluna B </th>
<th>Título da coluna C </th>
</tr>
<tr>
<td>A1 </td>
<td>B1 </td>
<td>C1 </td>
</tr>
<tr>
<td>A2 </td>
<td>B2 </td>
<td>C2 </td>
</tr>
<tr>
<td>A3 </td>
<td>B3 </td>
<td>C3 </td>
</tr>
</table>

</body>
</html>

Para saber mais sobre tabelas visite o Maujor.

Para iniciantes em CSS e HTML (Tableless)

Enfim, começar a escrever... Começar é sempre um desafio. Nem sempre sabemos por onde. Resolvi começar a escrever sobre CSS, pois trabalho com isso. Aconteceu também que, semana passada, um amigo me pediu ajuda pra começar a trabalhar com CSS. É bem verdade q existe muita coisa boa sobre esse assunto na internete, mas pra quem tá começando... Como saber onde é bom mesmo? O q está desatualizado? Tantas incertezas... rs Muitas informações dispersas. Então vamos lá!

Primeira coisa que se precisa... As ferramentas. Começe instalando (ou atualizando) programas:

• Firefox: http://br.mozdev.org/

Sei que a maioria dos internautas usam IE, mas quem vai construir sites precisa de um navegador de verdade. Também amo o Opera, vale a pena instalar: http://www.opera.com/

• Firebug: https://addons.mozilla.org/pt-BR/firefox/addon/1843
  

Simplesmente INDISPENSÁVEL. É um complemento onde, estando numa página da internete (seja a q estamos fazendo ou uma já existente) podemos ver o código html de um lado e o código css do outro. Pra quem quer aprender, vale a pena abrir páginas interessantes e ver como o profissional construiu aquela página. Aprendi várias coisas assim. É indispensável na hora q estamos construindo uma página, pois nele podemos testar (editando o código no próprio firebug e vendo instantaneamente como fica na página). Também nos ajuda a achar onde estão as alterações a serem feitas.

O Firebug é sem sombra de dúvidas o melhor, mas vale a pena instalar os "similares", para nos auxiliar quando estivermos acertando o layout nos outros navegadores. Isso mesmo, ainda que vc queira criar uma página visando o IE, é melhor construi-la no Firefox primeiro. Lembre-se q é importante aprender certo. E para isso é preciso construir páginas para bons navegadores (firefox, opera,...).

• Para o IE: Debugbar - http://www.debugbar.com/
• Para o Opera: Dragonfly - http://www.opera.com/dragonfly/

É possível construir suas páginas de HTML e CSS até mesmo no bloco de notas, mas facilita usar programas q ajudem "completando" e "colorindo" o código, pois é muito comum cometermos erros de digitação. E quem está começando comete muitos erros. Podemos achar chato e acabarmos por desistir se ficarmos meia hora pra descobrir cada errinho de digitação. Dreamweaver e e-texteditor são bons programas pra isso, mas são pagos.