You are here
Introducción a @font-face de CSS Sin categoría 

Introducción a @font-face de CSS

Introducción a @font-face de CSS

 

Fuentes en CSS 3. Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web.

 

Importar fuentes tipográficas mediante CSS con @font-face

 

La mencionada regla @font-face nace con CSS 2 pero hasta CSS 3 no empieza a funcionar y prosperar. En un principio sólo funcionaba en IE 5 y únicamente admitía formatos de fuente .eot, pero con el paso del tiempo otros navegadores ampliaron su soporte, comenzando con Safari 3,1. En la actualidad admite otros tipos de formatos tipográficos como son .ttf y .otf y funciona también con los navegadores Opera 10, Firefox 3,1 y por supuesto, todas las versiones superiores a los navegadores ya citados.

 

Así pues, nada nos impide ya hacer uso de esta @font-face, para poder utilizar cualquier fuente en nuestra web, con la garantía que se verá perfectamente en todos los navegadores más actuales.

 

Su sintaxis es la siguiente:

 

@font-face{
font-family:<nombre_fuente>;
src: <source>[,<source>]*;
[font-weight:<weigth>];
[font-style:<style>];
}

 

Con esto definimos el tipo de letra y su ubicación en nuestro servidor. Si queremos utilizar dicha fuente tan solo tenemos que llamarla con font-family en las reglas de estilo que deseemos.

 

Debemos tener en cuenta que si no encuentra la fuente en nuestro servidor, cogerá la siguiente por defecto que tengamos definida en nuestra hoja de estilos.

 

Ejemplo de uso de @font-face

 

A continuación colocamos el código de un ejemplo con dos tipos de fuentes, una con formato .eot y otra con formato .otf. El primero se ven en todos los navegadores y en el segundo IE coge otra letra por defecto ya que no admite el formato .otf.

 

Código de la hoja de estilos:

 

@font-face {
font-family: Vivaldi;
font-style: normal;
font-weight: normal;
src: url(VIVALDI0.eot);
}

@font-face{
font-family: “gothic”;
font-style: normal;
font-weight: normal;
src: url(gothic.otf);
}

H1{
font-family: “gothic”;
}

H2{
font-family: “Vivaldi”;
}

 

Y a continuación el código HTML para ver el resultado:

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>
<head>
<title>Prueba con estilos de letra distintos</title>
<link rel=”STYLESHEET” type=”text/css” href=”estilo-font-face.css”>
</head>

<body>

<h1>Estamos probando la letra Gothic (no se verá en IE)</h1>
<h2>Aqui la letra Vivaldi</h2>
</body>
</html>

 


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts