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]