Comunidad de diseño web y desarrollo en internet online

Tutorial: Usa cualquier fuente en tu web usando CSS3

Citar            
MensajeEscrito el 24 Sep 2011 03:42 pm
Hola. Traigo un nuevo tutorial.

Seguro que os habéis preguntado como integrar en una página web absolutamente cualquier fuente que usemos de forma local. Pues con CSS3 es de lo más sencillo.

Empezamos por añadir en una hoja de estilo o entre las etiquetas <style> y </style> la siguiente sintaxis:

Código :

@font-face {
    font-family: "el-nombre-que-quieras-poner";
    src: url( fuente.otf );


Hay que tener en cuenta que el nombre que indicamos en font-family no es necesariamente el de la fuente, sino el que vas a indicar en el momento de asignar dicha fuente a una clase.

Por otra parte, la URL también dependerá de si el archivo está en la misma carpeta que el HTML o si habrá que subir o bajar algunos directorios.

Bien, hecho esto, ahora solo hace falta indicar donde queremos usar esta fuente.

Si, por ejemplo, queremos que se nos aplique en una cabecera h1 que tenga un tamaño de 26 píxeles, escribiremos:

Código HTML :

h1 {
    font-family: "nombre-que-hayamos-indicado-antes;"
    font-size: 26px;


Hecho esto, todos los textos contenidos entre etiquetas <h1> y </h1> se formatearán con esa fuente y tendrán un tamaño de 26px.

Ahora bien, os habréis fijado que he usado una fuente .otf en mi ejemplo. Debéis saber que si usamos fuentes .otf no funcionarán en Internet Explorer y que para que lo haga debemos convertirlas al formato EOT.

Conviene además indicar de nuevo todo dentro de <!--[if IE]> y <![endif]-->.

Eso es todo, ya puedes usar las fuentes que quieras en tu página web.


Espero que haya sido de utilidad. Si tienes alguna pregunta, no dudes en formularla en los comentarios.

Por viruscorp

Claber

164 de clabLevel

2 tutoriales

 

Soy tú, pero mejor

chrome
Citar            
MensajeEscrito el 25 Sep 2011 09:08 am
Lamentablemente esto no es tan fácil. OTF no es leído por todos los navegadores y el estandar recomendado es WOFF. iPhone y iPad sólo leen SVG y tal como mencionaste, todos los IE anteriores a IE9 requieren EOT. IE9 requiere WOFF.

Es un buen inicio de tuto, pero dado que su contenido no es factual, lo paso a Aportes.

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 25 Sep 2011 10:04 am
Bueno, es cuestión de añadir condicionales para cada navegador. Existen en la red muchos conversores de fuentes que nos permiten convertirlas para luego insertarlas en el código.

Por viruscorp

Claber

164 de clabLevel

2 tutoriales

 

Soy tú, pero mejor

safari
Citar            
MensajeEscrito el 25 Sep 2011 08:44 pm

viruscorp escribió:

Bueno, es cuestión de añadir condicionales para cada navegador. Existen en la red muchos conversores de fuentes que nos permiten convertirlas para luego insertarlas en el código.
Tampoco funciona así, imagino que no has usado esto en producción de una manera sensata.

Necesitas componer de una manera especial el font-face para darle prioridad a los .eot, saltar las restricciones de IE6/7 respecto a otras fuentes y luego ponerlas en un orden especifico.

Los .SVG necesitan el nombre interno antes de funcionar correctamente en un hash frente a ellos, como las anclas.

El .OTF no está tan ampliamente soportado como el TTF y ninguno tiene la protección de licencias que tiene WOFF o EOT.

Aprende esos pequeños detalles, que son claves para el tema de font-face y tendrás un gran tuto.

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 25 Sep 2011 09:27 pm
Gracias maestro.

Tienes todo mi respeto :)

Por viruscorp

Claber

164 de clabLevel

2 tutoriales

 

Soy tú, pero mejor

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.