Curso de Profissional de TGPSI: módulo 4

1. Formatação de tipo
de letra (fontes)
Agrupamento de Escolas da Batalha
Miguela Fernandes
Janeiro 2012

2. Considerações iniciais
Propriedades básicas para os tipos de letra (fonte):
Color: cor da fonte;
font-family: tipo de fonte;
font-size: tamanho de fonte;
font-style: estilo de fonte;
font-variant: fontes maiúsculas pequenas;
font-weight: tornar mais escura a fonte (negrito);
Font: abreviadar todas as propriedades.
MF. 2

3. COLOR
Em código hexadecimal: #FFFFFF
Em código rgb: rgb(255,235,0)
Com o nome da cor: yellow, red, blue, entre
outras.
Exemplo:
h1 {color: #FFFFFF;}
h2 {color: rgb(124,234,255);}
p {color: #000000;}
MF. 3

4. FONT-FAMILY
nome da família das fontes : é usar o nome da
fonte. Por exemplo:
“verdana”, “helvetica”, “arial”,…..
Exemplo:
<style type="text/css">
h2 {font-family: arial, helvetica,
serif;}
p {font-family: sans-serif;}
</style>
MF. 4

5. FONT-SIZE (1)
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length: medida reconhecida pelas CSS (px, pt, em, cm, ...)
%
MF. 5

6. FONT-SIZE (2)
Exemplo:
<style type="text/css">
h1 {font-size: 15px;}
h2 {font-size: smaller;}
p {font-size: 120%;}
</style>
MF. 6

7. FONT-STYLE
normal: fonte normal na vertical
italic: fonte inclinada
oblique: fonte obliqua (mais inclinada)
Exemplo:
h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique;}
MF. 7

8. FONT-VARIANT
normal: fonte normal
small-caps: maiúsculas pequenas
Exemplo:
<style type="text/css">
h1 {font-variant: normal;}
h2 {font-variant: small-caps;}
</style>
MF. 8

9. FONT-WEIGHT
normal
bold
bolder
lighter Exemplo:
100
200
<style type="text/css">
300 p {font-weight: bold;}
400 </style>
500
600
700
800
900
MF. 9

10. Sintaxe FONT
font: [style] [variant] [weight] [size] [/line-
height] [family]
Exemplo:
<style type="text/css">
p { font: italic small-caps bold
14px "Comic Sans MS", sans-
serif; }
</style>
MF. 10

11. Webgrafia e Bibliografia
http://www.ufpa.br/dicas/htm/htm-fra.htm
http://www.sevenseek.com/tutorials/learning-css-
important-css-concepts/
http://webstyleguide.com/wsg3/5-site-structure/3-
site-file-structure.html
http://www.tizag.com/cssT/inline.php
Teagu, J. C. (2004). DHTML and CSS for the World Wide
Web (2ª Ed.). USA:Peachpit Press.
MF. 11