Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Regra @font-face das CSS 3

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
Traducaofedora
Traducaofedora
Chargement dans…3
×

Consultez-les par la suite

1 sur 65 Publicité
Publicité

Plus De Contenu Connexe

Similaire à Regra @font-face das CSS 3 (20)

Publicité

Plus récents (20)

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]

×