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.
@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:
@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.
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
Bitacoras.com
21. Sep, 2012
Información Bitacoras.com…
Valora en Bitacoras.com: 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 fon……