O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Próximos SlideShares
animações e jogos além do canvas
Avançar
Transfira para ler offline e ver em ecrã inteiro.

4

Compartilhar

Baixar para ler offline

Regra @font-face das CSS 3

Baixar para ler offline

Apresentação sobre a regra CSS @font-face das CSS 3

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

Regra @font-face das CSS 3

  1. 1.
  2. 2. Maurício Samy Silva Maujor
  3. 3. Maujor Quem é esse cara?
  4. 4. Assunto:
  5. 5. Objetivos 1. Fornecer uma visão geral da evolução da implementação da regra @font-face pelo W3C. 2. Apresentar diretrizes e procedimentos que visam a criação de regras de estilo consistentes e crossbrowser para definição de fontes em projetos web .
  6. 6. Sumário 1. Introdução 2. Histórico 3. Sintaxe @font-face 4. Obtendo fontes 5. Conclusão
  7. 7. INTRODUÇÃO
  8. 8. @font-face é uma funcionalidade das CSS3 destinada a definir o uso, em uma aplicação web, de uma fonte hospedada em um servidor remoto. 1. Introdução
  9. 9. font-family: arial, ... font-family: verdana, ... font-family: georgia, ... Definição tradicional de fonte: 1. Introdução
  10. 10. font-family: ChunkFive, ... font-family:SimensSlabBlack, ... font-family: SWIS721, ... Além de arial,verdana,georgia: 1. Introdução
  11. 11. 10
  12. 12. georgia
  13. 13. ???????
  14. 14. Técnicas FIR 1. Introdução F ahrner I mage R eplacement
  15. 15. HISTÓRICO
  16. 16. 2. Histórico Elemento FONT – HTML3.2 (jan/1997) Atributos SIZE e COLOR <p>< font size =“7” color =“#f00”> Cabeçalho nível 1 </font></p>
  17. 17. “ Alguns agentes de usuário suportam o atributo FACE cujo valor é uma lista de nomes de fontes, separados por vírgula e em ordem de preferência.” “ A lista é usada para procura e uso da fonte com o nome especificado, no sistema operacional do usuário. FACE não é parte da HTML3.2. “ 2. Histórico
  18. 18. <p><font size=“ 2 ” face=“Arial,Verdana,Serif” > Texto do parágrafo </font></p> 2. Histórico
  19. 19. HTML4 (dez/1997) Elemento FONT e seus atributos SIZE, COLOR e FACE DEPRECATED ou seja EM DESUDO 2. Histórico
  20. 20. HTML4 (dez/1997) “ Folhas de estilo simplicam a marcação e retiram da HTML a responsabilidade de apresentação” 2. Histórico
  21. 21. CSS1 (dez/1996) seletor { font-family : Arial, Verdana, Sans-serif; } 2. Histórico
  22. 22. CSS1 (dez/1996) p { font-family : Arial, Verdana, Sans-serif; } <font face =“Arial,Verdana,Sans-serif”> Texto do parágrafo </font> HTML3.2 (jan/1997) 2. Histórico
  23. 23. CSS2 (maio/1998) Cria a regra - @font-face @font-face { descriptor: valor; descriptor: valor; ... descriptor: valor; } 2. Histórico
  24. 24. Descriptors => Descritivos Foram previstos 24 descritivos unicode-range units-per-em slope width etc... font-family font-style font-size 2. Histórico src
  25. 25. 2. Histórico @font-face { font-family : ‘League Gothic’; src : url(‘/fontes/league_gothic.ttf’); } p{ font-family : ‘League Gothic’, Sans-Serif; }
  26. 26. CSS2.1 (agosto/2002) 2. Histórico
  27. 27. Módulo font das CSS3 Rascunho de trabalho - jun/2009 Nota: O 1º. Rascunho de Trabalho data de jul/2001 2. Histórico
  28. 28. Descriptors => Descritivos Foram previstos 9 descritivos font-weight font-stretch unicode-range src font-variant font-family font-style font-size font-feature-settings Nota: A especificação continua em Rascunho de Trabalho 2. Histórico
  29. 29. 1998 2002 2009 2. Histórico
  30. 30. SINTAXE
  31. 31. Fonte escolhida: League Gothic 3. Sintaxe body { font-family:‘League Gothic’, sans-serif; ... }
  32. 32. Baixar a fonte : League Gothic (Direitos autorais) 3. Sintaxe Fontes opentype league_gothic. ttf league_gothic. otf
  33. 33. 3. Sintaxe @font-face { font-family: ‘ League Gothic ’; src: url(‘http://maujor.com/fontes/league_gothic.ttf’); } p { font-family: “ League Gothic ”, sans-serif; }
  34. 34. 3. Sintaxe @font-face { font-family: ‘ xpto ’; src: url(‘http://maujor.com/fontes/league_gothic.ttf’); } p { font-family: “ xpto ”, sans-serif; }
  35. 35. 3. Sintaxe
  36. 36. 3. Sintaxe @font-face { font-family: ‘League Gothic’; src: url(‘/fontes/league_gothic. eot ’), url(‘/fontes/league_gothic. ttf ’); }
  37. 37. 3. Sintaxe @font-face { font-family: ‘League Gothic’; src: url( ‘/ fontes/league_gothic.eot’), url(‘/fontes/league_gothic.ttf’ ); } url(‘/fontes/league_gothic.eot’),url(‘/fontes/league_gothic.ttf’);
  38. 38. 3. Sintaxe @font-face { font-family: ‘League Gothic’; src: url(‘/fontes/league_gothic.eot ?#iefix ’), url(‘/fontes/league_gothic.ttf’); }
  39. 39. 3. Sintaxe @font-face { font-family: ‘League Gothic’; src: url(‘/fontes/league_gothic.eot?#iefix’) format(‘embedded-opentype’) , url(‘/fontes/league_gothic.ttf’) format(‘truetype’) ; }
  40. 40. 3. Sintaxe
  41. 41. 3. Sintaxe Fonte: http://www.fontspring.com
  42. 42. 3. Sintaxe @font-face { font-family: ‘League Gothic’; src: url(‘/fonts/league_gothic.eot’); /* IE9 Compat Modes */ src: url(‘/fontes/league_gothic.eot?#iefix’) format(‘embedded-opentype’), url(‘/fontes/league_gothic.woff’) format(‘woff’), url(‘/fontes/league_gothic.ttf’) format(‘truetype’), url(‘/fontes/league_gothic.svg#league’) format(‘svg’); }
  43. 43. O fenômeno FOUC das CSS F lash O f U nstyled C ontent
  44. 44. O fenômeno FOUT Flash Of Unstyled Type Flash Of Unstyled Type
  45. 45.
  46. 46. http://www.extensis.com/en/WebINK/fout-b-gone/
  47. 47.
  48. 48. OBTENDO FONTES
  49. 49. 4. Obtendo fontes
  50. 50. 4. Obtendo fontes
  51. 51. 4. Obtendo fontes
  52. 52. 4. Obtendo fontes
  53. 53. 4. Obtendo fontes
  54. 54. 4. Obtendo fontes
  55. 55. 4. Obtendo fontes http://www.extensis.com/en/WebINK/developers.jsp
  56. 56. 4. Obtendo fontes http://code.google.com/intl/pt-BR/apis/webfonts/docs/ getting_started.html
  57. 57. 4. Obtendo fontes http://www.google.com/webfonts
  58. 58. 4. Obtendo fontes <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://fonts.googleapis.com/ css?family= Nome|Nome|Nome &quot;> ...css?family=Arvo|Droid+Serif”>
  59. 59. 4. Obtendo fontes ...css?family=Arvo:italic&quot;> ...css?family=Arvo:bold&quot;> ...css?family=Arvo:bolditalic&quot;>
  60. 60. 4. Obtendo fontes ... css?family=Arvo &text=Bom%20Dia ... css?family=Arvo &subset=cyrillic &quot;>
  61. 61. 4. Obtendo fontes h1.esp { font-family: Arvo, Sans-Serif; } p.dif { font-family: ‘Droid Serif’, Serif; }
  62. 62. Conclusão É com você! A regra @font-face das CSS3 oferece um mecanismo seguro para uso de fontes importadas em web sites.
  63. 63.
  64. 64. Obrigado! [email_address]
  • renatodeluna

    Nov. 4, 2014
  • jampasilva

    Jan. 29, 2013
  • prixtrovolok

    Sep. 29, 2011
  • Maujor

    May. 10, 2011

Apresentação sobre a regra CSS @font-face das CSS 3

Vistos

Vistos totais

4.257

No Slideshare

0

De incorporações

0

Número de incorporações

790

Ações

Baixados

38

Compartilhados

0

Comentários

0

Curtir

4

×