Laboratório de InformáticaPropriedades CSS:Fontes

1º Semestre 2009 > PUCPR > BSI

Bruno C. de PaulaBruno C. de Paula

Resumo da aula

Após finalizarmos nosso trabalho com os seletores do CSS, é chegado o momento de conhecer as principais propriedades do CSS;Nosso objetivo hoje será conhecer as propriedades que lidam com fontes.

311/04/23

Material referente ao assunto da aula

Recomendação W3C do CSS 2.1 (em Inglês):–http://www.w3.org/TR/CSS21/selector.

html#pattern-matchingCapítulo do Livro CSS – Guia de Bolso:

–http://altabooks.tempsite.ws/capitulos_amostra/00_cssbolso.pdf

Material referente ao assunto da aulaTutoriais sobre fontes em CSS:

–http://www.maujor.com/tutorial/fonttut.php

–http://www.maujor.com/w3ctuto/fonts.html

–http://pt-br.html.net/tutorials/css/lesson4.asp

Fontes para web designers:–http://dev.opera.com/articles/view/fon

ts-for-web-design-a-primer/

411/04/23

Material referente ao assunto da aulaPortal sobre tipografia da Microsoft:

–http://www.microsoft.com/typography/default.mspx

Design para CSSers (I, II e III):–http://www.luli.com.br/2008/03/27/des

ign-para-cssers-tipografia-parte-i/–http://www.luli.com.br/2008/04/01/des

ign-para-cssers-tipografia-parte-ii/–http://www.luli.com.br/2008/04/07/des

ign-para-cssers-tipografia-parte-iii/511/04/23

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c

apítulo.

611/04/23

711/04/23

Tags HTML referenciadas na aula (em Português –site Referenciando)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.

811/04/23

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;

911/04/23

Propriedades CSS referenciados na aula (em Inglês –site SitePoint)font-family: seleciona a família da fonte;font-size: escolhe o tamanho da fonte;font-weight: espessura da fonte

(negrito);font-style: estilo da fonte (itálico, etc);font-variant: texto em maiúsculas

“Small-caps”;font: forma abreviada.

1011/04/23

Exemplos da aula

Fontes;Personalidade das fontes;Exemplo serifa;Exemplo serifa2;Propriedade font-family;Famílias genéricas;Propriedade font-size;

Exemplos da aula

font-size absoluto;font-size relativo;font-size comprimento absoluto;font-size comprimento relativo;font-size comprimento absoluto 2;font-size porcentagem;

1111/04/23

Exemplos da aula

Propriedade font-weight;Propriedade font-style;Propriedade font-variant;Representação resumida.

1211/04/23

Relembrando as aulas passadas...

1311/04/23

1411/04/23

Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer

Assunto de hoje: propriedades e valores!

1511/04/23

“Transformação” de ie6 em ie7

1611/04/23

<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->

“Transformação” de ie6-7 em ie8

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

Exemplo

Há diversas famílias de fontes

1711/04/23

Cada fonte possui uma personalidadediferente

1811/04/23

Fontes possuem uma anatomia bem definida

1911/04/23

2011/04/23

Desenvolvido por Paulo de Loyola

Fontes podem ter serifas(sobre)

2111/04/23

2211/04/23

Exemplo

Propriedades CSS tipográficas de fontefont-family: seleciona a família da fonte;font-size: escolhe o tamanho da fonte;font-weight: espessura da fonte

(negrito);font-style: estilo da fonte (itálico, etc);font-variant: texto em maiúsculas

“Small-caps”;font: forma abreviada.

2311/04/23

2411/04/23

font-family

Família genéricaColocar como último valor

2511/04/23

font-size: Tipos de valorValor absoluto: xx-small, x-

small, small, medium, large, x-large, xx-large;

Valor relativo: larger, smaller;Comprimento: em, ex, px, in,

cm, mm, pt, pc. Porcentagem.

2611/04/23

2711/04/23

Exemplo

font-size:Valor absolutoDepende do navegador.

2811/04/23

font-size: Valor relativoMaior (larger) ou menor (smaller);Relativo ao pai do elemento;

2911/04/23

font-size:Comprimento absoluto

3011/04/23

Cuidado: – mapeamento do monitor para a tela pode não ser preciso;– Não funciona com 2 monitores.

cm: centímetros;mm: milímetros;in: polegadas (2,54 cm);pt: pontos (1/72 de polegada);pc: picas (12 pontos);

3111/04/23

3211/04/23

Se o usuário alterar o tamanho da fonte, fontes em comprimento absoluto ficam do mesmo tamanho!

3311/04/23

font-size:Comprimento relativoem: refere-se ao tamanho da fonte, útil

para tamanhos relativos em fontes e para deixar o site acessível;

ex: refere-se à altura da letra x (altura x) da fonte;

px: cada ponto na tela de um monitor é um pixel. Problema atual: usuário usa resoluções muito diferentes: 1024x768, 800x600, 1024x600, 1680x1050, 240x320, 320x240.

3411/04/23

3511/04/23

font-size:Comprimento em %1em = 100%1.2em = 120%Porcentagem é em relação ao font-size

do elemento pai;

3611/04/23

3711/04/23

font-weight:espessura do texto (negrito)

3811/04/23

Na prática, os valores não estão implementados na maior parte dos navegadores.Ver: http://clagnut.com/blog/2228/

font-style:estilo da fonteItálico corresponde ao manuscrito e

não à letra ser inclinada;Oblíquo corresponde ao inclinado;Por exemplo:

–Existe Georgia itálica e não existe Georgia oblíqua;

–Existe Helvética oblíqua e não existe Helvética itálica.

3911/04/23

4011/04/23

4111/04/23

Observe a diferença no “gia”!

4211/04/23

font-variant:texto em maiúsculas

O valor small-caps faz as letras minúsculas parecerem pequenas letras maiúsculas;

4311/04/23

Representação resumida

font: [style] [variant] [weight] [size]/[line-height] [family] [fontes sistema];

[size] e [family] são obrigatórios;[fontes sistema] deve estar isolado.

4411/04/23

Fontes do sistema

caption: botões, selects;icon: ícones;menu: menus;message-box: caixas de mensagem;small-caption: rótulos de controles

pequenos;status-bar: rótulo de barra de status.

4511/04/23

4611/04/23

4711/04/23

Material referente ao assunto da aula

Recomendação W3C do CSS 2.1 (em Inglês):–http://www.w3.org/TR/CSS21/

selector.html#pattern-matchingCapítulo do Livro CSS – Guia de Bolso:

–http://altabooks.tempsite.ws/capitulos_amostra/00_cssbolso.pdf

Material referente ao assunto da aulaTutoriais sobre fontes em CSS:

– http://www.maujor.com/tutorial/fonttut.php

– http://www.maujor.com/w3ctuto/fonts.html

– http://pt-br.html.net/tutorials/css/lesson4.asp

Fontes para web designers:– http://dev.opera.com/articles/view/fonts-

for-web-design-a-primer/

4811/04/23

Material referente ao assunto da aulaPortal sobre tipografia da Microsoft:

– http://www.microsoft.com/typography/default.mspx

Design para CSSers (I, II e III):– http://www.luli.com.br/2008/03/27/design-

para-cssers-tipografia-parte-i/– http://www.luli.com.br/2008/04/01/design-

para-cssers-tipografia-parte-ii/– http://www.luli.com.br/2008/04/07/design-

para-cssers-tipografia-parte-iii/

4911/04/23

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um

capítulo.

5011/04/23

5111/04/23

Próximas aulas de CSS

Propriedades CSS: –Textos, imagens e fundos.