SlideShare uma empresa Scribd logo
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 diretrizes e procedimentos que visam a criação de regras de estilo consistentes e crossbrowser para definição de fontes  em projetos web .
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 servidor remoto.   1. Introdução
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. Introdução
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 nível 1 </font></p>
“ 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
<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órico
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ágrafo </font> HTML3.2 (jan/1997)   2. Histórico
CSS2 (maio/1998)   Cria a regra  -  @font-face   @font-face { descriptor: valor; descriptor: valor; ... descriptor: valor; } 2. Histórico
Descriptors =>  Descritivos   Foram previstos  24   descritivos  unicode-range units-per-em slope width etc... font-family font-style font-size 2. Histórico src
2. Histórico @font-face { font-family : ‘League Gothic’; src : url(‘/fontes/league_gothic.ttf’); } p{ font-family : ‘League Gothic’, Sans-Serif; }
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 font-family font-style font-size font-feature-settings Nota: A especificação continua em Rascunho de Trabalho 2. Histórico
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 { font-family: “ League Gothic ”, sans-serif; }
3. Sintaxe @font-face  {    font-family: ‘ xpto ’;    src: url(‘http://maujor.com/fontes/league_gothic.ttf’);    }  p { font-family: “ xpto ”, sans-serif; }
3. Sintaxe
3. Sintaxe @font-face  {    font-family: ‘League Gothic’;    src: url(‘/fontes/league_gothic. eot ’),    url(‘/fontes/league_gothic. ttf ’);    }
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’);
3. Sintaxe @font-face {    font-family: ‘League Gothic’;    src: url(‘/fontes/league_gothic.eot ?#iefix ’),    url(‘/fontes/league_gothic.ttf’);    }
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’) ;    }
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 */    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’);    }
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?family= Nome|Nome|Nome &quot;> ...css?family=Arvo|Droid+Serif”>
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

Mais conteúdo relacionado

Semelhante a Regra @font-face das CSS 3

HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
Caio Gomes
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Cristofer Sousa
 
SUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilosSUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilos
João Paulo Barbosa Neto
 
Formação T.2 do Modulo I da Formação HTML & CSS
Formação T.2 do Modulo I da Formação HTML & CSSFormação T.2 do Modulo I da Formação HTML & CSS
Formação T.2 do Modulo I da Formação HTML & CSS
PedroMatos469278
 
Desenvolvendo aplicações web com python e web2py
Desenvolvendo aplicações web com python e web2pyDesenvolvendo aplicações web com python e web2py
Desenvolvendo aplicações web com python e web2py
Gilson Filho
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
RubenManhia
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
Sandra Oliveira
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
hellequin
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
Herbet Ferreira Rodrigues
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
Professor Samuel Ribeiro
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
clodiney cruz
 
Fontes em XML, Android O. Configuração e Uso
Fontes em XML, Android O. Configuração e UsoFontes em XML, Android O. Configuração e Uso
Fontes em XML, Android O. Configuração e Uso
Vinícius Thiengo
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Fabio Moura Pereira
 
pesquisas na internet
pesquisas na internetpesquisas na internet
pesquisas na internet
a20061577
 
Sapo Sessions PHP
Sapo Sessions PHPSapo Sessions PHP
Sapo Sessions PHP
João Machado
 
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de EstiloTécnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
ElsaValada
 
Lightning Talk sobre Sinatra no III RubyOnRio
Lightning Talk sobre Sinatra no III RubyOnRioLightning Talk sobre Sinatra no III RubyOnRio
Lightning Talk sobre Sinatra no III RubyOnRio
Luciano Sousa
 
CSS tipo de letra (fontes)
CSS tipo de letra (fontes)CSS tipo de letra (fontes)
CSS tipo de letra (fontes)
Agrupamento de Escolas da Batalha
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
Carlos Rodrigo de Araujo
 

Semelhante a Regra @font-face das CSS 3 (20)

HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
SUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilosSUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilos
 
Formação T.2 do Modulo I da Formação HTML & CSS
Formação T.2 do Modulo I da Formação HTML & CSSFormação T.2 do Modulo I da Formação HTML & CSS
Formação T.2 do Modulo I da Formação HTML & CSS
 
Desenvolvendo aplicações web com python e web2py
Desenvolvendo aplicações web com python e web2pyDesenvolvendo aplicações web com python e web2py
Desenvolvendo aplicações web com python e web2py
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Fontes em XML, Android O. Configuração e Uso
Fontes em XML, Android O. Configuração e UsoFontes em XML, Android O. Configuração e Uso
Fontes em XML, Android O. Configuração e Uso
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
pesquisas na internet
pesquisas na internetpesquisas na internet
pesquisas na internet
 
Sapo Sessions PHP
Sapo Sessions PHPSapo Sessions PHP
Sapo Sessions PHP
 
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de EstiloTécnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
 
Lightning Talk sobre Sinatra no III RubyOnRio
Lightning Talk sobre Sinatra no III RubyOnRioLightning Talk sobre Sinatra no III RubyOnRio
Lightning Talk sobre Sinatra no III RubyOnRio
 
CSS tipo de letra (fontes)
CSS tipo de letra (fontes)CSS tipo de letra (fontes)
CSS tipo de letra (fontes)
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 

Mais de Mauricio Maujor

Quem se importa com acessibilidade na web?
Quem se importa com acessibilidade na web?Quem se importa com acessibilidade na web?
Quem se importa com acessibilidade na web?
Mauricio Maujor
 
O que o Maujor viu no Vue
O que o Maujor viu no VueO que o Maujor viu no Vue
O que o Maujor viu no Vue
Mauricio Maujor
 
CSS - Uma tecnologia em constante evolução
CSS - Uma tecnologia em constante evoluçãoCSS - Uma tecnologia em constante evolução
CSS - Uma tecnologia em constante evolução
Mauricio Maujor
 
FlexBox - Uma visão geral
FlexBox - Uma visão geralFlexBox - Uma visão geral
FlexBox - Uma visão geral
Mauricio Maujor
 
O elemento PICTURE para imagens responsivas
O elemento PICTURE para imagens responsivasO elemento PICTURE para imagens responsivas
O elemento PICTURE para imagens responsivas
Mauricio Maujor
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Mauricio Maujor
 
Papo de Dinossauro
Papo de DinossauroPapo de Dinossauro
Papo de Dinossauro
Mauricio Maujor
 
FrontinFortaleza 2015
FrontinFortaleza 2015FrontinFortaleza 2015
FrontinFortaleza 2015
Mauricio Maujor
 
Meetup CSS #7 no CTNovatec, SP
Meetup CSS #7 no CTNovatec, SPMeetup CSS #7 no CTNovatec, SP
Meetup CSS #7 no CTNovatec, SP
Mauricio Maujor
 
SVG - De volta e para o futuro
SVG - De volta e para o futuroSVG - De volta e para o futuro
SVG - De volta e para o futuro
Mauricio Maujor
 
Front in sampa2014
Front in sampa2014Front in sampa2014
Front in sampa2014
Mauricio Maujor
 

Mais de Mauricio Maujor (11)

Quem se importa com acessibilidade na web?
Quem se importa com acessibilidade na web?Quem se importa com acessibilidade na web?
Quem se importa com acessibilidade na web?
 
O que o Maujor viu no Vue
O que o Maujor viu no VueO que o Maujor viu no Vue
O que o Maujor viu no Vue
 
CSS - Uma tecnologia em constante evolução
CSS - Uma tecnologia em constante evoluçãoCSS - Uma tecnologia em constante evolução
CSS - Uma tecnologia em constante evolução
 
FlexBox - Uma visão geral
FlexBox - Uma visão geralFlexBox - Uma visão geral
FlexBox - Uma visão geral
 
O elemento PICTURE para imagens responsivas
O elemento PICTURE para imagens responsivasO elemento PICTURE para imagens responsivas
O elemento PICTURE para imagens responsivas
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Papo de Dinossauro
Papo de DinossauroPapo de Dinossauro
Papo de Dinossauro
 
FrontinFortaleza 2015
FrontinFortaleza 2015FrontinFortaleza 2015
FrontinFortaleza 2015
 
Meetup CSS #7 no CTNovatec, SP
Meetup CSS #7 no CTNovatec, SPMeetup CSS #7 no CTNovatec, SP
Meetup CSS #7 no CTNovatec, SP
 
SVG - De volta e para o futuro
SVG - De volta e para o futuroSVG - De volta e para o futuro
SVG - De volta e para o futuro
 
Front in sampa2014
Front in sampa2014Front in sampa2014
Front in sampa2014
 

Último

Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 

Último (8)

Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 

Regra @font-face das CSS 3

  • 1.
  • 3. Maujor Quem é esse cara?
  • 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. Sumário 1. Introdução 2. Histórico 3. Sintaxe @font-face 4. Obtendo fontes 5. Conclusão
  • 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. font-family: arial, ... font-family: verdana, ... font-family: georgia, ... Definição tradicional de fonte: 1. Introdução
  • 10. font-family: ChunkFive, ... font-family:SimensSlabBlack, ... font-family: SWIS721, ... Além de arial,verdana,georgia: 1. Introdução
  • 11. 10
  • 14. Técnicas FIR 1. Introdução F ahrner I mage R eplacement
  • 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. “ 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. <p><font size=“ 2 ” face=“Arial,Verdana,Serif” > Texto do parágrafo </font></p> 2. Histórico
  • 19. HTML4 (dez/1997) Elemento FONT e seus atributos SIZE, COLOR e FACE DEPRECATED ou seja EM DESUDO 2. Histórico
  • 20. HTML4 (dez/1997) “ Folhas de estilo simplicam a marcação e retiram da HTML a responsabilidade de apresentação” 2. Histórico
  • 21. CSS1 (dez/1996) seletor { font-family : Arial, Verdana, Sans-serif; } 2. Histórico
  • 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. CSS2 (maio/1998) Cria a regra - @font-face @font-face { descriptor: valor; descriptor: valor; ... descriptor: valor; } 2. Histórico
  • 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. 2. Histórico @font-face { font-family : ‘League Gothic’; src : url(‘/fontes/league_gothic.ttf’); } p{ font-family : ‘League Gothic’, Sans-Serif; }
  • 26. CSS2.1 (agosto/2002) 2. Histórico
  • 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. 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. 1998 2002 2009 2. Histórico
  • 31. Fonte escolhida: League Gothic 3. Sintaxe body { font-family:‘League Gothic’, sans-serif; ... }
  • 32. Baixar a fonte : League Gothic (Direitos autorais) 3. Sintaxe Fontes opentype league_gothic. ttf league_gothic. otf
  • 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. 3. Sintaxe @font-face { font-family: ‘ xpto ’; src: url(‘http://maujor.com/fontes/league_gothic.ttf’); } p { font-family: “ xpto ”, sans-serif; }
  • 36. 3. Sintaxe @font-face { font-family: ‘League Gothic’; src: url(‘/fontes/league_gothic. eot ’), url(‘/fontes/league_gothic. ttf ’); }
  • 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. 3. Sintaxe @font-face { font-family: ‘League Gothic’; src: url(‘/fontes/league_gothic.eot ?#iefix ’), url(‘/fontes/league_gothic.ttf’); }
  • 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’) ; }
  • 41. 3. Sintaxe Fonte: http://www.fontspring.com
  • 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. O fenômeno FOUC das CSS F lash O f U nstyled C ontent
  • 44. O fenômeno FOUT Flash Of Unstyled Type Flash Of Unstyled Type
  • 45.
  • 47.
  • 55. 4. Obtendo fontes http://www.extensis.com/en/WebINK/developers.jsp
  • 56. 4. Obtendo fontes http://code.google.com/intl/pt-BR/apis/webfonts/docs/ getting_started.html
  • 57. 4. Obtendo fontes http://www.google.com/webfonts
  • 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. 4. Obtendo fontes ...css?family=Arvo:italic&quot;> ...css?family=Arvo:bold&quot;> ...css?family=Arvo:bolditalic&quot;>
  • 60. 4. Obtendo fontes ... css?family=Arvo &text=Bom%20Dia ... css?family=Arvo &subset=cyrillic &quot;>
  • 61. 4. Obtendo fontes h1.esp { font-family: Arvo, Sans-Serif; } p.dif { font-family: ‘Droid Serif’, Serif; }
  • 62. Conclusão É com você! A regra @font-face das CSS3 oferece um mecanismo seguro para uso de fontes importadas em web sites.
  • 63.