Propriedade Fonte CSS

Como construir Tráfego para o teu Site,
Ganhe dinheiro com o seu site.
Guia e dicas, experimente:
http://ganhar.noble7fix.com

Guia Prático CSS

Lição 6 - Propriedade Fontes

Construir um Website

Recomende este site a um amigo

Se abrir o Word vai concerteza encontrar o menu sobre fontes, tipo de letras, cores, tamanho, sublinhado, negrito, etc...

Obs: As fontes que tiver instaladas no seu computador, nomeadamente no Word pode usar para o seu Website, digamos que são fontes padrão....

VEJA O EXEMPLO

clique aqui

Estilo : Verdana / Tamanho: 12 / cor: verde / sublinhado

O meu website é o melhor do mundo

Propriedade Fontes - serve para definir as caracteristicas das letras que vão compor o texto ou letras do seu website.

Concerteza já trabalhou com o Word ou outro editor de texto, ou mesmo no Notepad, encontra o comando Formatar e Tipo de Letra, apresenta uma lista em que pode escolher o tipo de fonte que deseja para o texto ou qualquer letra que deseje. É isso que vamos aprender nesta página.

Esta parte acerca das fontes também não tem nenhum segredo. Sobretudo quem está habituado a usar o Word é fácil, sabe muito bem que tem um menú onde escolher o tipo de letra, a fonte, o tamanho, sublinhado, a negrito, a cor e no próprio texto do word a posição. Em Html é a mesma coisa, aliás o HTML não tem fontes próprias, vai buscar as fontes que tiver instaladas no seu PC, e tem muitas por onde escolher. Se por acaso desejar colocar no seu site uma fonte que não tenha instalada é só procurar sites com fontes gratuitas e há muitas por onde escolher, fazer o download e aí está, é só colocar o código e ela vai aparecer nas suas páginas web. Vamos aqui é aprender como colocar e as várias formas.

Seleccionar e inserir fontes em CSS

Assim aprendemos algumas possibilidades relativas a fontes. Já deve ter compreendido mais uma vez a importância do CSS quando queremos mudar um texto, as fontes de um website inteiro, sem dúvida poupa muito trabalho e de que maneira....

Vamos então analisar a parte que está sublinhada...

1º Refere-se à posição do texto na página, alinhamento.

2º Refere-se à fonte , tamanho (size), cor do texto, fonte (face) Verdana:

Estilo : Verdana / Tamanho: 12 / cor: verde / sublinhado

3º Refere-se também ao texto que está a verde, tamanho (size), cor (color), fonte (face) Verdana: O meu website é o melhor do mundo

As propriedades CSS das Fontes são as seguintes:

1º - font-family = define a familia da fonte. exemplo acima será: Verdana

2º - font-style = define a escolha da fonte em normal, italic ou oblique

3º - font-variant = define as variantes normal ou small-caps

4º - font-weight = define se é normal ou bold (negrito)

5º - font-size = define o tamanho

6º - font = fonte

A sintaxe geral para ditar as regras para as propriedades das fontes são assim

Pode definir só as que quiser, não é obrigatório inserir todas as regras para as propriedades.

Os únicos valores que são sempre obrigatórios: size e family. Todos os outros, lógico que são facultativos, se não os colocar vai "buscar" as definições padrão ou pré-definidas.

A ordem pelo qual podem ser apresentados estes valores não tem relevância: style, variant, weight e size.

1º - <div id="wb_Text7" style="position:absolute;left:217px;top:387px;width:506px;height:36px;z-index:8" align="left">

2º - <font style="font-size:16px" color="#000000" face="Verdana">Estilo : Verdana / Tamanho: 12 / cor:  verde /  sublinhado  <br>

3º - </font><font style="font-size:16px" color="#32CD32" face="Verdana"><u>O meu website é o melhor do mundo</u> </font></div>

</div>

Escolha uma fonte padrão, genérica para o seu website, será mais prático. Depois conforme a sua arte e gosto se quiser vá alterando desde o tipo de fonte, até ao tamanho e cor, etc..o texto, a palavra, parte do texto que desejar.

Eis um exemplo, esperamos que não se assuste se clicar no exemplo e observar, vai perceber fácilmente como tudo funciona:

Se analisar bem não é nada complicado, escolhe o tipo de fonte o tamanho, a posição, a cor, o estilo, etc, basta comparar com o exemplo, ou então copie este texto em HTML para o Notepad e salve com...a extensão .html por exemplo fontes.html e clique em cima dessa página que criou...

<html>

<head>

</head>

<font style="font-size:21px" color="#000000" face="Trebuchet MS"><b>Propriedades para definir fonte, cor, tamanho, estilo, etc...</b></font></div>

<font style="font-size:13px" color="#000000" face="Arial">Estilo : Arial / Tamanho: 10 . <br>

O meu website é o melhor do mundo </font></div>

<font style="font-size:13px" color="#000000" face="Arial">Estilo : Arial / Tamanho: 16 / cor: verde  <br>

</font><font style="font-size:21px" color="#009300" face="Arial">O meu website é o melhor do mundo</font><font style="font-size:13px" color="#000000" face="Arial"> </font></div>

<font style="font-size:13px" color="#000000" face="Times New Roman">Estilo : Times New Roman / Tamanho: 12 / cor:  vermelha <br>

</font><font style="font-size:21px" color="#FF0000" face="Times New Roman">O meu website é o melhor do mundo</font><font style="font-size:13px" color="#000000" face="Times New Roman"> </font></div>

<font style="font-size:13px" color="#000000" face="Tahoma">Estilo : Tahoma  / Tamanho: 12 / cor:  vermelha /  negrito / sublinhado / itálico<br>

</font><font style="font-size:13px" color="#FF0000" face="Tahoma"><b><i><u>O meu website é o melhor do mundo</u></i></b></font><font style="font-size:13px" color="#000000" face="Tahoma"> </font></div>

<font style="font-size:16px" color="#000000" face="Trebuchet MS">Estilo : Trebuchet MS /Tamanho: 12 / cor:  verde /  negrito  <br>

</font><font style="font-size:16px" color="#32CD32" face="Trebuchet MS"><b>O meu website é o melhor do mundo</b> </font></div>

<font style="font-size:16px" color="#000000" face="Verdana">Estilo : Verdana / Tamanho: 12 / cor:  verde /  sublinhado  <br>

</font><font style="font-size:16px" color="#32CD32" face="Verdana"><u>O meu website é o melhor do mundo</u> </font></div>

</div>

</body>

</html>