• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Regra @font-face das CSS 3
 

Regra @font-face das CSS 3

on

  • 3,616 views

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

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

Statistics

Views

Total Views
3,616
Views on SlideShare
2,915
Embed Views
701

Actions

Likes
3
Downloads
33
Comments
0

12 Embeds 701

http://tutsmais.com.br 601
http://www.klauslaube.com.br 51
http://local.klauslaube.com.br 11
http://klauslaube.com.br 10
http://localhost:8000 8
http://quirktools.com 6
http://kplaube.webfactional.com 4
http://paper.li 4
http://web.archive.org 3
http://twitter.com 1
http://us-w1.rockmelt.com 1
http://localhost 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Regra @font-face das CSS 3 Regra @font-face das CSS 3 Presentation Transcript

    • 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]