regra @font-face das css 3
DESCRIPTION
Apresentação sobre a regra CSS @font-face das CSS 3TRANSCRIPT
1
Maurício Samy Silva
2
Maujor
Maujor
Quem é esse cara?
3
Assunto:
4
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 .
5
Sumário
1. Introdução
2. Histórico
3. Sintaxe @font-face
4. Obtendo fontes
5. Conclusão
6
INTRODUÇÃO7
@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
8
font-family: arial, ...
font-family: verdana, ...
font-family: georgia, ...
Definição tradicional de fonte:
1. Introdução
9
font-family: ChunkFive, ...
font-family:SimensSlabBlack, ...
font-family: SWIS721, ...
Além de arial,verdana,georgia:
1. Introdução
10
1011
georgia
12
???????
13
Técnicas FIR
1. Introdução
Fahrner Image Replacement
14
HISTÓRICO15
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>16
“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
17
<p><font size=“2” face=“Arial,Verdana,Serif”>
Texto do parágrafo
</font></p>
2. Histórico
18
HTML4 (dez/1997)
Elemento FONT e seus atributos
SIZE, COLOR e FACE
DEPRECATED ou seja EM DESUDO
2. Histórico
19
HTML4 (dez/1997)
“Folhas de estilo simplicam a marcação e retiram da HTML a responsabilidade de apresentação”
2. Histórico
20
CSS1 (dez/1996)
seletor {
font-family: Arial, Verdana, Sans-serif;
}
2. Histórico
21
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
22
CSS2 (maio/1998)
Cria a regra - @font-face
@font-face { descriptor: valor; descriptor: valor; ... descriptor: valor; }
2. Histórico
23
Descriptors => Descritivos
Foram previstos 24 descritivos
unicode-range
units-per-em
slope
widthetc...
font-family
font-stylefont-size
2. Histórico
src24
2. Histórico
25
@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
26
Módulo font das CSS3 Rascunho de trabalho - jun/2009
Nota: O 1º. Rascunho de Trabalho data de jul/2001
2. Histórico
27
Descriptors => Descritivos
Foram previstos 9 descritivos
font-weight
font-stretch
unicode-range
src
font-variant
font-family
font-stylefont-size
font-feature-settings
Nota: A especificação continua em Rascunho de Trabalho
2. Histórico
28
1998
2002 2009
2. Histórico
29
SINTAXE30
Fonte escolhida: League Gothic
3. Sintaxe
body {font-family:‘League Gothic’, sans-serif;... }
31
Baixar a fonte: League Gothic(Direitos autorais)
3. Sintaxe
Fontes opentype
league_gothic.ttf
league_gothic.otf
32
3. Sintaxe
@font-face { font-family: ‘League Gothic’; src: url(‘http://maujor.com/fontes/league_gothic.ttf’); }
p { font-family: “League Gothic”, sans-serif; }
33
3. Sintaxe
@font-face { font-family: ‘xpto’; src: url(‘http://maujor.com/fontes/league_gothic.ttf’); }
p { font-family: “xpto”, sans-serif; }
34
3. Sintaxe
35
3. Sintaxe
@font-face { font-family: ‘League Gothic’; src: url(‘/fontes/league_gothic.eot’), url(‘/fontes/league_gothic.ttf’); }
36
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’); 37
3. Sintaxe
@font-face { font-family: ‘League Gothic’; src: url(‘/fontes/league_gothic.eot?#iefix’), url(‘/fontes/league_gothic.ttf’); }
38
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’);
}
39
3. Sintaxe
40
3. Sintaxe
Fonte: http://www.fontspring.com41
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’); }
42
43
O fenômeno FOUC das CSS
Flash Of Unstyled Content
44
O fenômeno FOUT
Flash Of Unstyled TypeFlash Of Unstyled Type
45
46http://www.extensis.com/en/WebINK/fout-b-gone/
47
OBTENDO FONTES48
4. Obtendo fontes
49
4. Obtendo fontes
50
4. Obtendo fontes
51
4. Obtendo fontes
52
4. Obtendo fontes
53
4. Obtendo fontes
54
4. Obtendo fontes
55http://www.extensis.com/en/WebINK/developers.jsp
4. Obtendo fontes
56http://code.google.com/intl/pt-BR/apis/webfonts/docs/ getting_started.html
4. Obtendo fontes
57http://www.google.com/webfonts
4. Obtendo fontes
58
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nome|Nome|Nome">
...css?family=Arvo|Droid+Serif”>
4. Obtendo fontes
59
...css?family=Arvo:italic">
...css?family=Arvo:bold">
...css?family=Arvo:bolditalic">
4. Obtendo fontes
60
...css?family=Arvo&text=Bom%20Dia
...css?family=Arvo&subset=cyrillic">
4. Obtendo fontes
61
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.
62
63
65