Comunidad de diseño web y desarrollo en internet online

Textos y fuentes en CSS 3

En anteriores temas hemos visto selectores, pseudo-elementos y pseudo-clases que son herramientas fundamentales para lograr un código más depurado y limpio. Estoy seguro que más de un diseñador habrá encontrado este comienzo muy pesado y aburrido. A partir de ahora veremos características de CSS más visuales con la que podrás explotar tu creatividad.

Los diseñadores web se han encontrado durante bastante tiempo con enormes limitaciones en cuanto a texto se refiere. CSS3 nos da un ápice de 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

Font-face nace en realidad con la versión 2 de CSS aunque hasta ahora no ha empezado a funcionar y prosperar adecuadamente. La implementación de font-face es la siguiente:

Código :

@font-face{ 
   font-family:<nombre_fuente>;/*El nombre con el que nos referiremos a la fuente*/ 
   src: <source>[,<source>]*;/*La ruta de donde cargamos el archivo del tipo*/ 
   [font-weight:<weigth>];/*Peso de la fuente*/ 
   [font-style:<style>];/*Estilo*/ 
}

Veamos un ejemplo:

Código :

@font-face{ 
            font-family:"Deliciosa"
            src:url('fonts/Delicious-Roman.otf');             
        } 
        #ejemplo{ 
            font-family:"Deliciosa"
        }

Notad que el nombre que indicamos en font-family es el nombre que actuará como alias de la tipografía, por lo tanto es irrelevante su valor, siempre que nos refiramos a ella de la misma manera.


En epicagency.net usan una tipografía especial para sus títulos y menús.

Existe el riesgo de que un navegador determinado no interprete correctamente algunos formatos de fuentes. Para asegurarse habría que importar todos los formatos:

Código :

src: url('Delicious-Roman.eot'); 
   src: local('?'), url('Delicious-Roman.woff') format('woff'), url('Delicious-Roman.ttf') format('truetype'), url('Delicious-Roman.svg#webfont57ztNrX6') format('svg');

Consejo: Existen aplicaciones que permiten exportar las tipografías de un formato a otro.

Podéis ver el resultado en el siguiente ejemplo (Testeado en Chrome 9)

Columnas en CSS3

Si queremos crear una estructura de varias columnas contamos con cuatro nuevos atributos. Al día que se escribe este curso estos atributos están únicamente incorporados de manera experimental en navegadores derivados de Mozilla (Firefox) y Webkit (Chrome y Safari), por lo que hay que añadir el prefijo -moz- o -webkit- según el caso. Os describo los atributos:

  • column-count. Indica el número de columnas que queremos tener.
  • column-width. Define el ancho de cada columna.
  • column-gap. Define la separación entre columnas.
  • column-rule. Crea una línea de separación entre las columnas.

Por ejemplo:

Código :

.ejemplo{ 
            -moz-column-count: 3
            -webkit-column-count: 3
            -moz-column-width: 100px; 
            -moz-column-gap: 20px; 
            -webkit-column-width: 100px; 
            -webkit-column-gap: 20px; /*column-rule se centra en el espacio dedicado al gap*/ 
            -webkit-column-rule: 1px solid #ccc;/*Observad que indicamos, ancho, estilo y color. 
            -moz-column-rule: 1px solid #ccc; 
        }

Podéis ver un ejemplo de multi-columna aquí.

word-wrap

En ocasiones algunas palabras cuya longitud excede el ancho de de la capa que lo contiene, por lo que ignorando toda media, la muy hija de un diccionario se sale arruinando el diseño.

El atributo word-warp soluciona esto "rompiendo" la palabra y situando el resto en las filas inferiores. Personalmente me parece una solución a medias, ya que lo correcto sería la inclusión de un guión en la ruptura de la palabra, al igual que cuando escribimos en un editor de textos.

Código :

word-wrap:break-word; /*Rompe las palabras*/ 
word-wrap:normal; /*Se porta de la forma habitual*/

Os dejo un ejemplo.

Conclusiones

Aunque a la fecha de la edición de este tema ninguno de los atributos aquí descritos tiene una implementación fiable en el 100% de los navegadores, es cierto que se ha notado un cambio de tendencias en el diseño web, con páginas que empiezan a basar su diseño en el atractivo de las tipografías.

Por último me gustaría recomendaros visitar e investigar Google Font Drectory.

En el próximo tema daremos un breve paseo por el modelo de color RGBA.

 

Información adicional

® Cristalab 2011

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.