Pinceladas da Web

Font

Com a propriedade font podemos alterar o estilo(style), o peso(weight), o variant(mostrar o texto em maiúsculas), o tamanho(size), o line-height(altura da linha), e a própria propriedade font.

font: italic bold normal small/1.4em Verdana, sans-serif;

o código acima pode ser lido da seguinte maneira: Da esquerda pra direita, o primeiro item deixaria nosso texto em itálico, com um peso bold, o variant normal, um tamanho relativo, depois a altura da linha setada em 1.4em e a font definida como Verdana, ou se não for encontrada no sistema, sans-serif.

Font-family

Aqui é onde definimos uma “família de fontes”. A 2 possíveis valores:

• Nome da Família
• Família Genérica

Se você adicionar um nome da família, é aconselhável também adicionar a família genéria em sua extremidade. Por que isso é priorizado na lista. Assim, se o usuário não tiver o nome o nome da font especificado em font-family, ele usará a mesma família genérica.

font-family: Verdana, sans-serif;

Font-size

Para alterar o tamanho do nosso texto, utilizamos a propriedade font-size:

font-size: valor;

Também pode ser usado:

• xx-large
• x-large
• larger
• large
• medium
• small
• smaller
• x-small
• xx-small
• length
• % (porcentagem)

Font-style

Você pode ajustar o estilo do seu texto com a propriedade font-style:

font-style: valor;

Valores aceitos:

• normal
• itailc
• oblique

Font-variant

Você pode definir se seu texto deve ser motrado em maiúsculas com a propriedade font-variant:

font-variant: valor;

Valores aceitos:

• normal
• small-caps

Font-weight

Você pode controlar o peso da sua fonte com a propriedade font-weight:

font-weight: valor;

Valores aceitos:

• lighter
• normal
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• bold
• bolder

Gostou, então comente, deixe seu feedback!!!

Tradução do artigo original de: CSS Basics.