CSS3 Fuentes

With CSS3, web designers are no longer forced to use only web-safe fonts

Regla CSS3 @font-face

Con las versiones anteriores de CSS, los diseñadores web tenían que utilizar las fuentes que ya estaban instaladas en el ordenador del usuario.

UsandoCSS3, los diseñadores web pueden utilizar cualquier fuente que les guste.

Cuando encuentre el archivo de fuente que desee usar, simplemente incluya el archivo de fuente en el sitio web y se descargará automáticamente para los usuarios que lo necesiten.

La fuente que ha seleccionado en la nuevaCSS3versión tiene una descripción sobre la@font-faceregla @font-face.

Su fuente "propia" se define en laCSS3 @font-faceregla @font-face.

Soporte del navegador

Los números en la tabla indican la primera versión del navegador que admite la propiedad.

Propiedad
@font-face 4.0 9.0 3.5 3.2 10.0

Internet Explorer 9+, Firefox, Chrome, Safari y Opera admiten fuentes WOFF (Web Open Font Format).

Firefox, Chrome, Safari y Opera admiten los tipos de fuente .ttf (TrueType) y .otf (OpenType).

Chrome, Safari y Opera también admiten fuentes SVG/colapso.

Internet Explorer también admite fuentes EOT (Embedded OpenType).

Nota:Internet Explorer 8 y versiones anteriores no admiten la nueva regla @font-face.

Use la fuente que necesite

En la nueva regla @font-face, primero debe definir el nombre de la fuente (por ejemplo, myFirstFont) y luego apuntar al archivo de fuente.

lamp Sugerencia:En la URL, use letras minúsculas para el nombre de la fuente; las mayúsculas en IE pueden producir resultados inesperados.

Para usar la fuente en un elemento HTML, haga referencia al nombre de la fuente (myFirstFont) mediante la propiedad font-family:

OperaSafariChromeFirefoxInternet Explorer

Ejemplo

<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>

Pruébelo »

Uso de texto en negrita

Debe agregar otra regla @font-face que contenga texto en negrita:

OperaSafariChromeFirefoxInternet Explorer

Ejemplo

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }

Pruébelo »

El archivo 'Sansation_Bold.ttf' es otro archivo de fuente que contiene la variante en negrita de la fuente Sansation.

Cuando el navegador use la familia de fuentes 'myFirstFont' para este texto, debería mostrarse en negrita.

De esta manera, puede tener muchas reglas @font-face para la misma fuente.

Descriptores de fuentes CSS3

La siguiente tabla enumera todos los descriptores de fuente y las definiciones de la regla @font-face:

Descriptor Valor Descripción
font-family name Obligatorio. Especifica el nombre de la fuente.
src URL Obligatorio. Define la URL del archivo de fuente.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Opcional. Define cómo se estira la fuente. El valor predeterminado es "normal".
font-style
  • normal
  • italic
  • oblique
 Opcional. Define el estilo de la fuente. El valor predeterminado es "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Opcional. Define el grosor de la fuente. El valor predeterminado es "normal".
unicode-range unicode-range Opcional. Define el rango de caracteres UNICODE admitido por la fuente. El valor predeterminado es "U+0-10FFFF".
Otras extensiones