Tutoriales en la Web

Textos y fuentes en CSS 3

Posteado el 21. Sep, 2012 por tuto in Desarrollo Web, HTML y CSS, HTML5

Los diseñadores web se han encontrado durante bastante tiempo con enormes limitaciones en cuanto a texto se refiere. CSS3 nos da la libertad en este sentido ya que por fin se asienta como estándar la implementación de font-face, nos permite editar textos en varias columnas y soluciona algunos problemas de visualización con word-warp.

@font-face

Es una propiedad muy útil para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador. Sólo debemos subir la fuente deseada a nuestro sitio web (mediante un cliente FTP, al servidor) y definirla mediante CSS.

La fuente debe ser definida por la regla @font-face, además de la clase en la que la vayamos a usar. Para el tipo de fuente, puede usarse en formato OpenType (.otf) o bien, en formato Truetype (.ttf).

Cómo implementar @font-face

Vamos a aplicarle la tipografía “Kimberley” en un encabezado H1.

Code block

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
@font-face {
 
font-family: "Kimberley";
 
src: url(http://www.midominio.com/fuente/kimberle.ttf) format("truetype");
 
}
 
h1 { font-family: "Kimberley", sans-serif }

Obviamente, debemos ubicar la dirección donde se encuentra la tipografía que deseemos definir en nuestro sitio, en este caso, “Kimberley”.

Si tenemos una larga lista de fuentes propias, podemos usar @import:

Code block

@import url(http://www.midominio.com/style/index.css) all;
 
h1 { font-family: Goodfish, serif }

Aquí les dejo un claro ejemplo del uso del font-face en la web de W3C.

Aplicación de la propiedad @font-face

Si quieren convertir sus fuentes a los formatos OpenType (.otf) o bien, en formato Truetype (.ttf) aquí les dejo el link de un generador de @font-face.

http://www.fontsquirrel.com/fontface/generator

Generador de font-face

Articulos relacionados:

Tags: css3, html5