laboratório de informática propriedades css: fontes
DESCRIPTION
Bruno C. de Paula. Laboratório de Informática Propriedades CSS: Fontes. 1º Semestre 2009 > 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 ; - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/1.jpg)
Laboratório de InformáticaPropriedades CSS:Fontes
1º Semestre 2009 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
![Page 2: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/2.jpg)
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.
![Page 3: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/3.jpg)
321/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
![Page 4: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/4.jpg)
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/
421/04/23
![Page 5: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/5.jpg)
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/521/04/23
![Page 6: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/6.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
621/04/23
![Page 7: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/7.jpg)
721/04/23
Tags HTML referenciadas na aula (em Português –site Referenciando)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.
![Page 8: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/8.jpg)
821/04/23
Tags HTML referenciadas na aula (em Inglês – site SitePoint)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;
![Page 9: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/9.jpg)
921/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.
![Page 10: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/10.jpg)
1021/04/23
Exemplos da aula
Fontes;Personalidade das fontes;Exemplo serifa;Exemplo serifa2;Propriedade font-family;Famílias genéricas;Propriedade font-size;
![Page 11: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/11.jpg)
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;
1121/04/23
![Page 12: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/12.jpg)
Exemplos da aula
Propriedade font-weight;Propriedade font-style;Propriedade font-variant;Representação resumida.
1221/04/23
![Page 13: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/13.jpg)
Relembrando as aulas passadas...
1321/04/23
![Page 14: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/14.jpg)
1421/04/23
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
![Page 15: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/15.jpg)
Assunto de hoje: propriedades e valores!
1521/04/23
![Page 16: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/16.jpg)
“Transformação” de ie6 em ie7
1621/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
![Page 17: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/17.jpg)
Há diversas famílias de fontes
1721/04/23
![Page 18: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/18.jpg)
Cada fonte possui uma personalidadediferente
1821/04/23
![Page 19: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/19.jpg)
Fontes possuem uma anatomia bem definida
1921/04/23
![Page 20: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/20.jpg)
2021/04/23
Desenvolvido por Paulo de Loyola
![Page 21: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/21.jpg)
Fontes podem ter serifas(sobre)
2121/04/23
![Page 22: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/22.jpg)
2221/04/23
Exemplo
![Page 23: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/23.jpg)
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.
2321/04/23
![Page 24: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/24.jpg)
2421/04/23
font-family
![Page 25: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/25.jpg)
Família genéricaColocar como último valor
2521/04/23
![Page 26: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/26.jpg)
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.
2621/04/23
![Page 27: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/27.jpg)
2721/04/23
Exemplo
![Page 28: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/28.jpg)
font-size:Valor absolutoDepende do navegador.
2821/04/23
![Page 29: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/29.jpg)
font-size: Valor relativoMaior (larger) ou menor (smaller);Relativo ao pai do elemento;
2921/04/23
![Page 30: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/30.jpg)
font-size:Comprimento absoluto
3021/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);
![Page 31: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/31.jpg)
3121/04/23
![Page 32: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/32.jpg)
3221/04/23
![Page 33: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/33.jpg)
Se o usuário alterar o tamanho da fonte, fontes em comprimento absoluto ficam do mesmo tamanho!
3321/04/23
![Page 34: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/34.jpg)
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.
3421/04/23
![Page 35: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/35.jpg)
3521/04/23
![Page 36: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/36.jpg)
font-size:Comprimento em %1em = 100%1.2em = 120%Porcentagem é em relação ao font-size
do elemento pai;
3621/04/23
![Page 37: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/37.jpg)
3721/04/23
![Page 38: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/38.jpg)
font-weight:espessura do texto (negrito)
3821/04/23
Na prática, os valores não estão implementados na maior parte dos navegadores.Ver: http://clagnut.com/blog/2228/
![Page 39: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/39.jpg)
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.
3921/04/23
![Page 40: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/40.jpg)
4021/04/23
![Page 41: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/41.jpg)
4121/04/23
![Page 42: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/42.jpg)
Observe a diferença no “gia”!
4221/04/23
![Page 43: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/43.jpg)
font-variant:texto em maiúsculas
O valor small-caps faz as letras minúsculas parecerem pequenas letras maiúsculas;
4321/04/23
![Page 44: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/44.jpg)
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.
4421/04/23
![Page 45: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/45.jpg)
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.
4521/04/23
![Page 46: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/46.jpg)
4621/04/23
![Page 47: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/47.jpg)
4721/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
![Page 48: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/48.jpg)
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/
4821/04/23
![Page 49: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/49.jpg)
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/
4921/04/23
![Page 50: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/50.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um
capítulo.
5021/04/23
![Page 51: Laboratório de Informática Propriedades CSS: Fontes](https://reader035.vdocuments.site/reader035/viewer/2022062518/56814467550346895db0f9cb/html5/thumbnails/51.jpg)
5121/04/23
Próximas aulas de CSS
Propriedades CSS: –Textos, imagens e fundos.