regra @font-face das css 3

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

Obrigado!

maujor@maujor.com

64

65