Maurício Samy Silva Maujor
Maujor Quem é esse cara?
Assunto:
Objetivos 1.   Fornecer uma visão geral da evolução da implementação da regra  @font-face  pelo W3C.   2.  Apresentar dire...
Sumário 1. Introdução 2. Histórico 3. Sintaxe @font-face 4. Obtendo fontes 5. Conclusão
INTRODUÇÃO
@font-face é uma funcionalidade das CSS3 destinada a definir o uso, em uma aplicação web, de uma fonte hospedada em um ser...
font-family: arial, ... font-family: verdana, ... font-family: georgia, ... Definição tradicional de fonte:   1. Introdução
font-family: ChunkFive, ... font-family:SimensSlabBlack, ... font-family: SWIS721, ... Além de arial,verdana,georgia:   1....
10
georgia
???????
Técnicas  FIR 1. Introdução F ahrner  I mage  R eplacement
HISTÓRICO
2. Histórico Elemento FONT – HTML3.2 (jan/1997)   Atributos SIZE e COLOR   <p>< font   size =“7”  color =“#f00”> Cabeçalho...
“ Alguns agentes de usuário suportam o atributo  FACE  cujo valor é uma lista de nomes de fontes, separados por vírgula e ...
<p><font size=“ 2 ”  face=“Arial,Verdana,Serif” > Texto do parágrafo </font></p> 2. Histórico
HTML4 (dez/1997)   Elemento FONT e seus atributos SIZE, COLOR e FACE DEPRECATED  ou seja  EM DESUDO 2. Histórico
HTML4 (dez/1997)   “ Folhas de estilo simplicam a marcação e retiram da HTML a responsabilidade de apresentação” 2. Histór...
CSS1 (dez/1996)   seletor { font-family : Arial, Verdana, Sans-serif; }   2. Histórico
CSS1 (dez/1996)   p { font-family : Arial, Verdana, Sans-serif; }   <font  face =“Arial,Verdana,Sans-serif”> Texto do pará...
CSS2 (maio/1998)   Cria a regra  -  @font-face   @font-face { descriptor: valor; descriptor: valor; ... descriptor: valor;...
Descriptors =>  Descritivos   Foram previstos  24   descritivos  unicode-range units-per-em slope width etc... font-family...
2. Histórico @font-face { font-family : ‘League Gothic’; src : url(‘/fontes/league_gothic.ttf’); } p{ font-family : ‘Leagu...
CSS2.1 (agosto/2002)   2. Histórico
Módulo font das CSS3  Rascunho de trabalho -   jun/2009 Nota: O 1º. Rascunho de Trabalho data de jul/2001 2. Histórico
Descriptors =>  Descritivos   Foram previstos  9   descritivos  font-weight font-stretch unicode-range src font-variant fo...
1998 2002 2009 2. Histórico
SINTAXE
Fonte escolhida: League Gothic 3. Sintaxe body { font-family:‘League Gothic’, sans-serif; ... }
Baixar a  fonte : League Gothic (Direitos autorais) 3. Sintaxe Fontes opentype league_gothic. ttf league_gothic. otf
3. Sintaxe @font-face  {  font-family: ‘ League Gothic ’;  src: url(‘http://maujor.com/fontes/league_gothic.ttf’);    }  p...
3. Sintaxe @font-face  {    font-family: ‘ xpto ’;    src: url(‘http://maujor.com/fontes/league_gothic.ttf’);    }  p { fo...
3. Sintaxe
3. Sintaxe @font-face  {    font-family: ‘League Gothic’;    src: url(‘/fontes/league_gothic. eot ’),    url(‘/fontes/leag...
3. Sintaxe @font-face {    font-family: ‘League Gothic’;    src: url( ‘/ fontes/league_gothic.eot’),    url(‘/fontes/leagu...
3. Sintaxe @font-face {    font-family: ‘League Gothic’;    src: url(‘/fontes/league_gothic.eot ?#iefix ’),    url(‘/fonte...
3. Sintaxe @font-face {    font-family: ‘League Gothic’;    src: url(‘/fontes/league_gothic.eot?#iefix’)  format(‘embedded...
3. Sintaxe
3. Sintaxe Fonte: http://www.fontspring.com
3. Sintaxe @font-face  {    font-family: ‘League Gothic’;   src: url(‘/fonts/league_gothic.eot’);  /* IE9 Compat Modes */ ...
O fenômeno FOUC das CSS F lash  O f  U nstyled  C ontent
O fenômeno FOUT Flash Of Unstyled Type Flash Of Unstyled Type
http://www.extensis.com/en/WebINK/fout-b-gone/
OBTENDO FONTES
4. Obtendo fontes
4. Obtendo fontes
4. Obtendo fontes
4. Obtendo fontes
4. Obtendo fontes
4. Obtendo fontes
4. Obtendo fontes http://www.extensis.com/en/WebINK/developers.jsp
4. Obtendo fontes http://code.google.com/intl/pt-BR/apis/webfonts/docs/ getting_started.html
4. Obtendo fontes http://www.google.com/webfonts
4. Obtendo fontes <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://fonts.googleapis.com/ css?f...
4. Obtendo fontes ...css?family=Arvo:italic&quot;> ...css?family=Arvo:bold&quot;> ...css?family=Arvo:bolditalic&quot;>
4. Obtendo fontes ... css?family=Arvo &text=Bom%20Dia ... css?family=Arvo &subset=cyrillic &quot;>
4. Obtendo fontes h1.esp { font-family: Arvo, Sans-Serif; } p.dif { font-family: ‘Droid Serif’, Serif; }
Conclusão É com você! A regra @font-face das CSS3 oferece um mecanismo seguro para uso de fontes importadas em web sites.
Obrigado! [email_address]
Regra @font-face das CSS 3
Upcoming SlideShare
Loading in...5
×

Regra @font-face das CSS 3

3,635
-1

Published on

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

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,635
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
35
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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]
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×