CSS3 fuentes y sus propiedades

CSS3 fuentes y sus propiedades

Con las reglas de CSS3 fuentes y sus propiedades, podemos controlar la apariencia de las mismas definiendo su familia, el peso, el tamaño, las decoraciones, el interlineado y otros aspectos no menos importantes. Un uso adecuado junto con sus propiedades en nuestras página web las dotarán de un aspecto bonito y fácil de leer.

Web-safe Fonts estándares

La comunidad de los diseñadores web, acordó un rango de fuentes están instaladas en la mayoría de ordenadores, utilizando una serie de fuentes específicas para cubrirse las necesidades que en teoría debería funcionar.

No hay garantía de que dichas fuentes se encuentren instaladas en cada cliente, pero el uso de este rango ha sido aceptado por la comunidad de programadores. Aquí están las fuentes seguras para utilizar en la web:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Webfonts a la carta

No todos los navegadores soportan los mismos estándares de CSS3. Internet Explorer solo soporta el formato OTF, WOFF y TTF con restricciones. La solución es incluir en nuestros archivos CSS los links a múltiples formatos:

  • OTF/TTF: Safari, Firefox, Chrome, Opera y IE9
  • EOT: IE4+
  • SVG: Safari, Safari Mobile, Chrome, Opera
  • WOFF: Firefox 3.6+, Opera 11.10+, Chrome 5+, Safari 5.1+, IE9+

Este es el ejemplo para incluir nuevas fuentes
Con la regla de CSS3 @font-face se soluciona el problema de las fuentes mediante la incrustación.

@font-face {
    font-family: 'Encabezados';
    src: url('../fonts/mifuente.eot');
    src: local('☺'), url('../fonts/mifuente.woff') format('woff'), 
                        url('../fonts/mifuente.ttf') format('truetype'),
                        url('../fonts/mifuente.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

Como hemos visto con las CSS3 fuentes y sus propiedades ya no hay escusa para no utilizar otros tipos de fuentes y destacar nuestros sitios web de los demás, creando un diseño atractivo y con personalidad.

Jesús Fernández - ProduccionesJFP

AutorJesús Fernández
Programador informático de profesión me dedico a tiempo completo al diseño Web y aplicaciones de escritorio sobre bases de datos. Mi hobbi y pasión es la fotografía, donde busco la creatividad y lo artístico de cada imagen.

¡Déjanos tu comentario!
Tu opinión es muy importante para nosotros, deja tu comentario, pregunta, sugerencia o crítica. Con este gesto nos ayudas a mejorar y crear mejores contenidos. ¡Animate!.
, ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para darte un servicio personalizado utilizamos cookies propios y de terceros. Si sigues navegando entendemos que aceptas su uso según nuestra política de Cookies
ACEPTAR