Fontes en CSS

font-family

Temos cinco familias xenéricas de fontes. As fontes que temos instaladas no sistema pertencen a un dos seguintes grupos:

serif inclúe a fonte Times
sans-serif inclúe as fontes Arial e Helvética
cursive inclúe a fonte Comic Sans
fantasy inclúe a fonte Ransom
monospace inclúe a fonte Courier. Esta familia ten como característica que a anchura de tódolos caracteres representables é a mesma.

Os tipos de letra existentes en cada familia dependerán das fontes instaladas no ordenador. Por iso a font-family pódeselle asignar unha lista de tipos de letra separados por comas. De forma que a hora de visualizar a páxina se o ordenador non ten a primeira fonte tome a segunda e así sucesivamente.
Recoméndase poñer como último elemento da lista font-family o nome dunha familia, desta forma asegurámonos de que se o ordenador non ten instaladas as fontes precedentes se visualice a páxina coa familia indicada.

NOTA:Se unha fonte contén espazos en branco debemos de especificar o seu nome entre comillas simples.

Exemplo de regras de estilo:

h1 { font-family:"Arial Black", "Helvetica Bold", sans-serif;}
p { font-family:"Times New Roman","Times",serif;}

Exemplo de código:

<h1>Estilo de cabeceira de primeiro nivel H1</h1>
 Estilo de parágrafo

Visualización:

Estilo de cabeceira de primeiro nivel H1

Estilo del parágrafo

font-style

Permite definir o estilo dunha fonte. Os valores poden ser:

normal - Visualiza o texto normalmente.
italic - Visualiza o texto en cursiva.
oblique - Visualiza o texto en oblicuo. Máis inclinado que o texto en cursiva, aínda que a diferencia entre italic e oblique pasará desapercibida para a maior parte das fontes.

Exemplo de regras de estilo:

.normal { font-style: normal;}
.cursiva { font-style: italic; }
.oblicua { font-style: oblique;}

Exemplo de código:

Visualización do texto en:
 normal , cursiva e oblicua

Visualización:

Visualización do texto en: normal , cursiva e oblicua

font-weight

Permite definir o grosor da fonte. Os valores poden ser:

normal - Visualiza o texto normalmente.
bold - Visualiza o texto en negriña.
bolder -Visualiza o texto máis negriña cá relación de grosor "herdado" do elemento do que dependen.
lighter - Visualiza o texto con menos grosor en relación do grosor "herdado" do elemento do que dependen.
Un múltiplo de 100 ente 100 e 900.

Existen fontes que só diferencian entre normal e negriña, non visualizando os diferentes grosores de negriña. O que si se respeta é que lighter sempre é máis suave que bolder.

Exemplo de regras de estilo:

.clara       {font-weight: lighter;}
.negrita     {font-weight: bolder;}
.maisNegrita {font-weight: bolder;}
.px900       {font-weight: 900;}

Exemplo de código:

Visualización do texto en:
lighter, bold, bolder e con 900 puntos

Visualización:

Visualización do texto en: lighter, bold , bolder e con 900 puntos

font-size

A propiedade font-size determina o tamaño da fonte. Os valores poden especificarse:

De forma absoluta - Valores admitidos: xx-smal, smal, medium, large, x-large, xx-large. O tamaño por defecto é medium. O resto dos valores supoñen unha diminución ou aumento do tamaño da fonte.
De forma relativa - Valores admitidos: smaller e larger. Fan a fonte máis pequena ou máis grande comparándoa co valor que tiñan inicialmente. É dicir indícase unha medida relativa a outro valor.
En porcentaxe - Cada valor en porcentaxe visualiza a fonte nun tamaño superior ou inferior porcentualmente ó valor inicial.
Expresando a súa unidade de medida - As unidades de media posibles son cm, in, pt e ppx.

Exemplo de regras de estilo:

.pequena       {font-size: small;}
.maisGrande    {font-size: larger;}
.porcentaxe180 {font-size: 180%;}
.px12          {font-size: 12px;}

Exemplo de código:

Este texto visualizase
<ul>
<li>De forma absoluta :
<dl>
<dt class="pequena">small</dt>
</dl>
</li>
<li>De forma relativa :
<dl>
<dt class="maisGrande">larger - Mais grande que o tamaño
da fonte que hereda - A de por defecto</dt>
<dt class="px12">larger - Mais grande
que o tamaño da fonte que herda - 12px</dt>
</dl>
</li>
<li>En porcentaxe :
<dl>
<dt class="porcentaxe180">180% do tamaño da fonte que
herda - a de por defecto</dt>
<dt class="px12">180% do tamaño
da fonte que herda - 12px</dt>
</dl>
</li>
<li>Expresando unha unidade de medida
<dl>
<dt class="px12">Con 12 px</dt>
</dl></li>
</ul>

Visualización:

Este texto visualizase

De forma absoluta :

small
De forma relativa :

larger - Mais grande que o tamaño da fonte que hereda - A de por defecto
larger - Mais grande que o tamaño da fonte que herda - 12px
En porcentaxe :

180% do tamaño da fonte que herda - a de por defecto
180% do tamaño da fonte que herda - 12px
Expresando unha unidade de medida

Con 12 px

font-variant

Os valores posibles son:

normal - Visualiza o texto normalmente.
small-caps - Estas últimas son letras maiúsculas de un tamaño máis pequeno co normal.

Exemplo de regra de estilo:

.versales {font-variant: small-caps;}

Exemplo de código:

Texto escrito en small-caps - Versales

Visualización:

Texto escrito en small-caps - Versales

word-spacing

Establece o tamaño do espazo entre as palabras. Os valores posibles son:

normal - Visualiza o texto normalmente.
Valor en cm ou px - Expresando un valor e a súa unidade de medida p.e 12px ou 12cm.

Exemplo de regra de estilo:

.espazoPalabras60 {word-spacing: 60px;}

Exemplo de código:

Espazo entre as palabras de 60px

Visualización:

Espazo entre as palabras de 60px

letter-spacing

Establece o tamaño do espazo entre os caracteres. Os valores posibles son:

normal - Visualiza o texto normalmente.
Valor en cm ou px - Expresando un valor e a súa unidade de medida p.e 12px ou 12cm.

Exemplo de regra de estilo:

.espazoCaracteres20 {letter-spacing:20px;}

Exemplo de código:

Espazo entre as letras de 20px

Visualización:

Espazo entre as letras de 20px

text-transform

Establece a forma na que se visualizará o texto. Os valores posibles son:

none - O texto non sufre ningunha transformación.Visualizase tal cal se escribiu.
uppercase - O texto visualizase en maiúsculas, aínda que se escribise en minúsculas.
lowercase - O texto visualizase en minúsculas, aínda que se escribise en maiúsculas.

Exemplo de regra de estilo:

.textoMaiusculas {text-transform:uppercase;}
.textoMinusculas {text-transform:lowercase;}

Exemplo de código:

Texto escrito en minúsculas que se visualizará en maiúsculas e texto escrito en MAIÚSCULAS que se visualizará en MINÚSCULAS

Visualización:

Texto escrito en minúsculas que se visualizará en maiÚsculas e texto escrito en MAIÚSCULAS que se visualizará en MINúSCULAS

text-decoration

Establece a forma na que se decorará o texto. Os valores posibles son:

none - Ningunha decoración. Pode ser interesante para os links establecer a propiedade text-decoration:none para que non aparezcan subliñados.
underline - O texto aparece subliñado.
overline - O texto aparece cunha liña superior.
line-through - O texto aparece tachado.
blink - O texto aparece parpadeándo, excepto en Internet Explorer que non funciona.

Exemplo de regra de estilo:

.textoUnderline    {text-decoration: underline;}
.textoOverLine     {text-decoration: overline;}
.textoLineThrough {text-decoration: line-through;}
.textoBlink       {text-decoration: blink;}

Exemplo de código:

Texto en:
underline,
overline,
line-through,
blink

Visualización:

Texto en: underline, overline, line-through, blink.

Seguinte