Estudaremos as fontes e como aplica-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
Familia 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.
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:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Cabeçalhos
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.
Exemplo:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
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 serão em itálico.
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. Dá uma olhada nos exemplos a seguir:
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.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Peso da fonte [font-weight]
A propriedade font-weight define quanto 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.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Tamanho da fonte [font-size]
O 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.
Usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir:
Exemplo:
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 teram 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, deverá usar unidades como '%' ou 'em'.
Compilando [font]
Usar font é uma abreviação que permite definir várias propriedades em uma só vez.
Veja quatro linhas de código usadas para definir propriedades de fonte para um parágrafo
:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usando a abreviação:
p {
font: italic bold 30px arial, sans-serif;
}
A ordem dos valores para font será mostrada a seguir :
font-style
font-variant
font-weight
font-size
font-family
Como tarefa para entregar por e-mail: elainemargarezi@hotmail.com até o dia 03/11/10 fica o exercício abaixo.(mandar o index.html e o style.css)
1- Crie uma página no topstyle onde os títulos (H1) tenham fonte Arial, tamanho 40px, itálico e negrito e os subtítulos( H2) tenham fonte Times New Roman, small-caps, tamanho 12px, normal. Além disso o documento tem que possuir uma imagem de fundo, não repetida, fixa na tela.
Para baixar o topstyle4 click no link: Topstyle4
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. Dá uma olhada nos exemplos a seguir:
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.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Peso da fonte [font-weight]
A propriedade font-weight define quanto 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.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Tamanho da fonte [font-size]
O 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.
Usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir:
Exemplo:
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 teram 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, deverá usar unidades como '%' ou 'em'.
Compilando [font]
Usar font é uma abreviação que permite definir várias propriedades em uma só vez.
Veja quatro linhas de código usadas para definir propriedades de fonte para um parágrafo
:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usando a abreviação:
p {
font: italic bold 30px arial, sans-serif;
}
A ordem dos valores para font será mostrada a seguir :
font-style
font-variant
font-weight
font-size
font-family
Como tarefa para entregar por e-mail: elainemargarezi@hotmail.com até o dia 03/11/10 fica o exercício abaixo.(mandar o index.html e o style.css)
1- Crie uma página no topstyle onde os títulos (H1) tenham fonte Arial, tamanho 40px, itálico e negrito e os subtítulos( H2) tenham fonte Times New Roman, small-caps, tamanho 12px, normal. Além disso o documento tem que possuir uma imagem de fundo, não repetida, fixa na tela.
Para baixar o topstyle4 click no link: Topstyle4
Nenhum comentário:
Postar um comentário