Bruno C. de Paula
Laboratório de Informática
CSS Seletores
Fontes em CSS
1º Semestre 2010 > PUCPR > BSI
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.
3
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-matching
 Capítulo do Livro CSS – Guia de Bolso:
http://altabooks.tempsite.ws/capitulos_am
ostra/00_cssbolso.pdf
4
Material referente ao assunto da aula
Tutoriais 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-webdesign-a-primer/

5
Material referente ao assunto da aula
 Portal
sobre tipografia da Microsoft:
http://www.microsoft.com/typography/defa
ult.mspx
 Design para CSSers (I, II e III):
http://www.luli.com.br/2008/03/27/designpara-cssers-tipografia-parte-i/
http://www.luli.com.br/2008/04/01/designpara-cssers-tipografia-parte-ii/
http://www.luli.com.br/2008/04/07/designpara-cssers-tipografia-parte-iii/
6
Material referente ao assunto da aula
 CSS
– Guia de Bolso;
Editora AltaBooks;
2008;
Download de um
capítulo.
7
Tags HTML referenciadas na aula (em
Português –site Referenciando)
Tag
de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>.
Tags HTML referenciadas na aula (em
Inglês – site SitePoint)
Tag
de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>;
8
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 “Smallcaps”;
 font: forma abreviada.
9
10
Relembrando as aulas passadas...
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
11
Assunto de hoje: propriedades e
valores!
12
13
“Transformação” de ie6 em ie7
<!--[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]-->
14
Há diversas
famílias de
fontes
15
Cada fonte
possui uma
personalidade
diferente
16
Fontes possuem uma
anatomia bem definida
17
Desenvolvido por Paulo de Loyola
18
Fontes
podem ter
serifas
(sobre)
19
Exemplo
Propriedades CSS tipográficas de
fonte
 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 “Smallcaps”;
 font: forma abreviada.
20
21
font-family
Família genérica
Colocar como último valor
22
font-size:
Tipos de valor
Valor
23
absoluto: xx-small, x-small,
small, medium, large, x-large, xxlarge;
Valor relativo: larger, smaller;
Comprimento: em, ex, px, in, cm,
mm, pt, pc.
Porcentagem.
24
Exemplo
font-size:
Valor absoluto
 Depende
do navegador.
25
font-size:
Valor relativo
 Maior
(larger) ou menor (smaller);
 Relativo ao pai do elemento;
26
font-size:
Comprimento absoluto
27
 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);
28
29
30
Se o usuário alterar o tamanho da
fonte, fontes em comprimento
absoluto ficam do mesmo tamanho!
font-size:
Comprimento relativo
 em:
31
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.
32
font-size:
Comprimento em %
 1em
= 100%
 1.2em = 120%
 Porcentagem é em relação ao font-size do
elemento pai;
33
34
font-weight:
espessura do texto (negrito)
35
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 fonte
 Itálico
36
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.
37
38
05/11/2015
39
Observe a diferença no “gia”!
font-variant:
texto em maiúsculas
O
valor small-caps faz as letras minúsculas
parecerem pequenas letras maiúsculas;
05/11/2015
40
41
Representação resumida
 font:
[style] [variant] [weight] [size]/[lineheight] [family] [fontes sistema];
 [size] e [family] são obrigatórios;
 [fontes sistema] deve estar isolado.
42
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.
43
44
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-matching
 Capítulo do Livro CSS – Guia de Bolso:
http://altabooks.tempsite.ws/capitulos_am
ostra/00_cssbolso.pdf
45
Material referente ao assunto da aula
 Tutoriais
sobre fontes em CSS:
http://www.maujor.com/tutorial/fonttut.ph
p
http://www.maujor.com/w3ctuto/fonts.htm
l
http://ptbr.html.net/tutorials/css/lesson4.asp
 Fontes para web designers:
http://dev.opera.com/articles/view/fontsfor-web-design-a-primer/
05/11/2015
46
Material referente ao assunto da aula
 Portal
sobre tipografia da Microsoft:
http://www.microsoft.com/typography/defa
ult.mspx
 Design para CSSers (I, II e III):
http://www.luli.com.br/2008/03/27/designpara-cssers-tipografia-parte-i/
http://www.luli.com.br/2008/04/01/designpara-cssers-tipografia-parte-ii/
http://www.luli.com.br/2008/04/07/designpara-cssers-tipografia-parte-iii/
05/11/2015
47
Material referente ao assunto da aula
 CSS
– Guia de Bolso;
Editora AltaBooks;
2008;
Download de um
capítulo.
05/11/2015