Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno 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.

313/1/2014 Material referente ao assunto da aula Recomendação W3C do CSS 2.1 (em Inglês): – r.html#pattern-matching r.html#pattern-matching Capítulo do Livro CSS – Guia de Bolso: – s_amostra/00_cssbolso.pdf s_amostra/00_cssbolso.pdf

Material referente ao assunto da aula Tutoriais sobre fontes em CSS: – ut.php ut.php – s.html s.html – br.html.net/tutorials/css/lesson4.asp br.html.net/tutorials/css/lesson4.asp Fontes para web designers: – nts-for-web-design-a-primer/ nts-for-web-design-a-primer/ 413/1/2014

Material referente ao assunto da aula Portal sobre tipografia da Microsoft: – y/default.mspx y/default.mspx Design para CSSers (I, II e III): – esign-para-cssers-tipografia-parte-i/ esign-para-cssers-tipografia-parte-i/ – esign-para-cssers-tipografia-parte-ii/ esign-para-cssers-tipografia-parte-ii/ – esign-para-cssers-tipografia-parte-iii/ esign-para-cssers-tipografia-parte-iii/ 513/1/2014

Material referente ao assunto da aula CSS – Guia de Bolso; – Editora AltaBooks; – 2008; – Download de um capítulo. Download de um capítulo 613/1/2014

7 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

813/1/2014 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;<script>

913/1/2014 Propriedades CSS referenciados na aula (em Inglês –site SitePoint)SitePoint font-family: seleciona a família da fonte; font-family font-size: escolhe o tamanho da fonte; font-size font-weight: espessura da fonte (negrito); font-weight font-style: estilo da fonte (itálico, etc); font-style font-variant: texto em maiúsculas Small-caps; font-variant font: forma abreviada. font

1013/1/2014 Exemplos da aula Fontes; Fontes Personalidade das fontes; Personalidade das fontes Exemplo serifa; Exemplo serifa2; Exemplo serifa2 Propriedade font-family; Propriedade font-family Famílias genéricas; Famílias genéricas Propriedade font-size; Propriedade font-size

Exemplos da aula font-size absoluto; font-size absoluto font-size relativo; font-size relativo font-size comprimento absoluto; font-size comprimento absoluto font-size comprimento relativo; font-size comprimento relativo font-size comprimento absoluto 2; font-size comprimento absoluto 2 font-size porcentagem; font-size porcentagem 1113/1/2014

Exemplos da aula Propriedade font-weight; Propriedade font-weight Propriedade font-style; Propriedade font-style Propriedade font-variant; Propriedade font-variant Representação resumida. Representação resumida 1213/1/2014

Relembrando as aulas passadas /1/2014

1413/1/2014 Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer

Assunto de hoje: propriedades e valores! 1513/1/2014

Transformação de ie6 em ie7 1613/1/2014 <script src=" type="text/javascript"> Transformação de ie6-7 em ie8 Exemplo

Há diversas famílias de fontes famílias de fontes 1713/1/2014

Cada fonte possui uma personalidade diferente personalidade diferente 1813/1/2014

Fontes possuem uma anatomia bem definida 1913/1/2014

2013/1/2014 Desenvolvido por Paulo de LoyolaPaulo de Loyola

Fontes podem ter serifas (sobre) serifassobre) 2113/1/2014

2213/1/2014 Exemplo

Propriedades CSS tipográficas de fonte font-family: seleciona a família da fonte; font-family font-size: escolhe o tamanho da fonte; font-size font-weight: espessura da fonte (negrito); font-weight font-style: estilo da fonte (itálico, etc); font-style font-variant: texto em maiúsculas Small-caps; font-variant font: forma abreviada. font 2313/1/2014

2413/1/2014 font-family

Família genérica Família genérica Colocar como último valor 2513/1/2014

font-size: Tipos de valor Valor 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. 2613/1/2014

2713/1/2014 Exemplo

font-size: Valor absoluto Valor absoluto Depende do navegador. 2813/1/2014

font-size: Valor relativo Valor relativo Maior (larger) ou menor (smaller); Relativo ao pai do elemento; 2913/1/2014

font-size: Comprimento absoluto Comprimento absoluto 3013/1/2014 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);

3113/1/2014

3213/1/2014

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

font-size: Comprimento relativo Comprimento relativo em: 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, 320x /1/2014

3513/1/2014

font-size: Comprimento em % Comprimento em % 1em = 100% 1.2em = 120% Porcentagem é em relação ao font-size do elemento pai; 3613/1/2014

3713/1/2014

font-weightfont-weight: espessura do texto (negrito) 3813/1/2014 Na prática, os valores não estão implementados na maior parte dos navegadores. Ver:

font-stylefont-style: estilo da fonte Itá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. 3913/1/2014

4013/1/2014

4113/1/2014

Observe a diferença no gia! 4213/1/2014

font-variantfont-variant: texto em maiúsculas O valor small-caps faz as letras minúsculas parecerem pequenas letras maiúsculas; 4313/1/2014

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. 4413/1/2014

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. 4513/1/2014

4613/1/2014

4713/1/2014 Material referente ao assunto da aula Recomendação W3C do CSS 2.1 (em Inglês): – r.html#pattern-matching r.html#pattern-matching Capítulo do Livro CSS – Guia de Bolso: – s_amostra/00_cssbolso.pdf s_amostra/00_cssbolso.pdf

Material referente ao assunto da aula Tutoriais sobre fontes em CSS: – ut.php ut.php – s.html s.html – br.html.net/tutorials/css/lesson4.asp br.html.net/tutorials/css/lesson4.asp Fontes para web designers: – nts-for-web-design-a-primer/ nts-for-web-design-a-primer/ 4813/1/2014

Material referente ao assunto da aula Portal sobre tipografia da Microsoft: – y/default.mspx y/default.mspx Design para CSSers (I, II e III): – esign-para-cssers-tipografia-parte-i/ esign-para-cssers-tipografia-parte-i/ – esign-para-cssers-tipografia-parte-ii/ esign-para-cssers-tipografia-parte-ii/ – esign-para-cssers-tipografia-parte-iii/ esign-para-cssers-tipografia-parte-iii/ 4913/1/2014

Material referente ao assunto da aula CSS – Guia de Bolso; – Editora AltaBooks; – 2008; – Download de um capítulo. Download de um capítulo 5013/1/2014

5113/1/2014 Próximas aulas de CSS Propriedades CSS: – Textos, imagens e fundos.