Bem vindo ao PROJECT-HTML
Aprenda mais sobre:
HTML, CSS, JavaScript, webmaster, Imagens, banners, wallpapers, videos aula, windows, utilitários para site/blogs, Jogos, animes e muito mais.
Basta se registrar!



 
InícioProject HTMLGaleriaFAQRegistrar-seConectar-se
Buscar
 
 

Resultados por:
 
Rechercher Busca avançada
Conectar-se
Nome de usuário:
Senha:
Conexão automática: 
:: Esqueci minha senha
Votação
Qual seu navegador favorito?
FireFox
29%
 29% [ 173 ]
Chrome
60%
 60% [ 356 ]
Internet Explorer
6%
 6% [ 36 ]
safari
1%
 1% [ 7 ]
Netscape
1%
 1% [ 3 ]
Opera
2%
 2% [ 11 ]
Avant
1%
 1% [ 3 ]
Total dos votos : 589
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 36 em 3/4/2016, 3:36 am
Últimos assuntos
» TAG´s (comandos)
4/8/2014, 10:15 am por robson

» Comandos básico de HTML - body (corpo da home page)
16/7/2014, 10:10 am por robson

» Apresentações aqui
15/7/2014, 4:14 pm por robson

» Como colocar "posts recomendados" no sou blog sou site.
24/3/2014, 8:05 pm por Otome

» Arquivo de ajuda sobre PHP, help para iniciantes e experientes
24/3/2014, 8:03 pm por Otome

» Imagens Exercício-6
22/3/2014, 5:19 pm por SY64

» Alinhamento de imagens
22/3/2014, 4:43 pm por SY64

» Link´s Exercicios-5
22/3/2014, 12:43 pm por SY64

» Criar um site passo a passo
1/8/2013, 4:41 pm por marlonsouzajs


Compartilhe | 
 

 Fontes

Ir em baixo 
AutorMensagem
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 26
Localização : Aqui no PROJECT-HTML
Pontos : 5708
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Fontes   9/1/2009, 8:04 am

Nesta lição estudaremos as fontes e como aplicá-las usando CSS. Veremos como criar situações para que determinada fonte seja visualizada pelo usuário mesmo não estando instalada em seu sistema operacional. Descreveremos as seguintes propriedades CSS:

font-family
font-style
font-variant
font-weight
font-size
font


Família de fontes [font-family]

A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.

Existem dois tipos de nomes para definir fontes: nomes para famílias de fontes e nomes para famílias genéricas. Os dois são explicados a seguir:

nome para famílias de fontes
Exemplos para este tipo (normalmente conhecidas como "font") são "Arial", "Times New Roman" ou "Tahoma".
nome para famílias genéricas
Famílias genéricas são fontes que pertencem a um grupo com aparência uniforme. Um exemplo são as fontes sans-serif que englobam a coleção de fontes que "não têm pé".

A diferença está mostrada na figura a seguir:
[Você precisa estar registrado e conectado para ver esta imagem.]

Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumas alternativas para ela. É recomendável encerrar a listagem das fontes com uma fonte genérica. Assim fazendo, em último caso a página será renderizada com fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis na máquina do usuário.

A seguir mostramos um exemplo de listagem de fontes:


Citação :
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Cabeçalhos <h1> serão renderizados com fonte "Arial". Se o usuário não tiver a font Arial instalada, será usada a fonte "Verdana". Se ambas estiverem indisponíveis na máquina do usuário será usada uma fonte da família sans-serif.

Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.

Estilo da fonte [font-style]
A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos as cabeçalhos <h2> serão em itálico.


Citação :
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}

Fonte variante [font-variant]
A propriedade font-variant é usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos. Confundiu? Dê uma olhada nos exemplos a seguir:
[Você precisa estar registrado e conectado para ver esta imagem.]

Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.

Citação :

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

Peso da fonte [font-weight]
A propriedade font-weight define quão negrito ou "pesada" deve ser renderizada a fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.


Citação :
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Tamanho da fonte [font-size]
On tamanho da fonte é definido pela propriedade font-size.

Existem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para definir o tamanho da fonte. Neste tutorial nós usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir:


Citação :
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Existe uma diferença fundamental entre as quatro unidades adotadas no exemplo acima. As unidades 'px' e 'pt' são absolutas, enquanto '%' e 'em' permitem ao usuário ajustar o tamanho das fontes ao seu gosto e necessidade. Muitos usuários têm restrições, como por exemplo, pessoas idosas, pessoas com visão limitada ou as que usam um monitor de baixa qualidade. Para fazer seu site acessível a todos, você deverá usar unidades como '%' ou 'em'.

Compilando [font]
Usar font é uma abreviação que permite definir várias propriedades em uma só.

Veja a seguir quatro linhas de código usadas para definir propriedades de fonte para um parágrafo <p>:


Citação :
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

Usar a abreviação simplifica o código como mostrado abaixo:



Citação :
p {
font: italic bold 30px arial, sans-serif;
}

A ordem dos valores para font é a mostrada a seguir :
font-style | font-variant | font-weight | font-size | font-family

_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
 
Fontes
Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Estilos das fontes na descrição dos foruns
» [Resolvido] [Resolvido] Fontes no fórum
» Fontes na template do fórum
» Personalização de fontes
» Fontes bonitas

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: CSS - (Cascading Style Sheets) :: CSS - Basico-
Ir para: