Codificación aprenderaprogramar.com: CU01045D
TIPOGRAFÍA CSS
Continuamos viendo posibilidades que ofrece CSS en relación a los textos. Un aspecto importante de los textos es el tipo de letra que usan y cómo se configura la letra. Hay distintas propiedades para configurar la tipografía, entre ellas font-family, font-variant y la propiedad shorthand font.
PROPIEDAD FONT-FAMILY
Fuente (font) suele usarse como sinónimo de letra. Así, tamaño de fuente significa tamaño de letra y tipo de fuente significa tipo de letra. Hay tipos de fuentes muy conocidos como Arial, Times New Roman, Calibri… pero la realidad es que existen cientos o miles de tipos de letras.
Las fuentes disponibles en un computador se corresponden con archivos donde se encuentra la información de dicha fuente. Por ejemplo en Windows podemos usar la fuente arial porque existe un archivo denominado arial.ttf en el sistema. El tipo (formato o extensión) del archivo puede variar de unos sistemas a otros: extensiones habituales son ttf, woff, svg, etc.
El tipo de letra que usa una página web ha sido históricamente un problema debido a que los intentos de usar determinados tipos de fuentes chocaban con que los navegadores empleaban fuentes que el usuario tuviera disponible en su ordenador o dispositivo de visualización. Si el diseñador o programador creaba la página web pensando en un tipo de fuente “X” y el usuario no disponía de dicha fuente en su ordenador, la página no se visualizaba tal y como se había previsto (y en muchas ocasiones los resultados eran desastrosos). La propiedad font-family trató de definir una vía que evitara este tipo de problemas y se ha usado y sigue usando mucho, aunque hoy día se combina con otras soluciones (como @font-face, que veremos más adelante) que tratan de ser la solución definitiva al problema de las fuentes en los desarrollos web.
En desarrollos web se usan los siguientes conceptos:
a) Lista de prioridad: permite definir varias posibilidades respecto a las fuentes a emplear en una página web, de modo que la fuente que se usará es la primera en la lista de prioridad siempre que esté disponible. En caso de no estar disponible la primera fuente en la lista de prioridad, se pasaría a la segunda y así sucesivamente. Si no hubiera disponible ninguna fuente dentro de las definidas en la lista de prioridad, se usaría la fuente por defecto.
b) Familia tipográfica o fuente concreta: alude a una fuente concreta y todas sus variantes (negrita, cursiva, etc.). Una familia tipográfica es por ejemplo “Times New Roman”, otra familia tipográfica es “Times” y otra familia tipográfica es “Arial”. Para escribir una familia tipográfica en CSS debemos hacerlo entre comillas simples o dobles siempre que el nombre contenga espacios en blanco.
c) Familia genérica: alude a un grupo de fuentes de características similares y que se distinguen sólo por pequeñas variaciones entre ellas. CSS permite indicar familias genéricas como mecanismo de seguridad para poder buscar alguna fuente dentro del sistema del usuario que tenga características parecidas a las que desea el diseñador o programador. Sirve por tanto como “mecanismo de seguridad” para poder usar una fuente lo más parecida posible a una deseada. Hay 5 familias genéricas que se usan en CSS: serif (ejemplo: Times), sans-serif (ejemplo: Arial), monospace (ejemplo: Courier) , cursive (ejemplo: Zapfino ) y fantasy (ejemplo: Comic Sans MS).
Normalmente en una lista de prioridad se escriben primero las familias tipográficas y en último lugar las familias genéricas. Ejemplo: Arial, Helvetica, sans-serif; es una lista de prioridad donde los dos primeros nombres aluden a tipos de letra concretos y el último a una familia genérica a usar en caso de no estar disponible ninguna de los tipos concretos indicados.
| PROPIEDAD CSS font-family | |
| Función de la propiedad | Permite indicar el tipo de fuente que se debe usar y establecer un orden de prioridad para el caso de no disponibilidad de algunas fuentes. |
| Valor por defecto | No existe un valor por defecto, depende del navegador |
| Aplicable a | Todos los elementos |
| Valores posibles para esta propiedad | Un tipo de fuente concreto |
| Una familia genérica de fuentes | |
| Una lista de prioridad que puede incluir tipos de fuente concretas o familias genéricas, separadas por comas. | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com |
#content1 { “Trebuchet MS”, Helvetica, sans-serif;} .elementoJukeBox { font-family: 'Courier New', Courier, monospace;} |
Aunque se admite especificar sólo un tipo de fuente específico, se recomienda indicar siempre un tipo de fuente genérico para el caso de que no pueda cargarse la fuente específica deseada.
Cuando se definen prioridades, el hecho de que sea posible aplicar el primer criterio especificado no significa que no se vaya a usar el segundo. Por ejemplo, podría existir un símbolo no disponible en la fuente deseada, y en ese caso se recurre a la segunda posibilidad en la lista de prioridades.
Para crear diseños con tipos de letra que no sean los más comunes habremos de recurrir a una regla especial CSS, @font-face, que estudiaremos más adelante.
PROPIEDAD FONT-VARIANT
Esta propiedad es una propiedad sencilla que permite poner una fuente en un modo especial denominado de “pequeñas mayúsculas”, “versales” o “small-caps”. Si usamos text-transform: uppercase; el texto se pondrá en mayúsculas normales. Si usamos font-variant: small-caps; el texto se pondrá en una mayúscula condensada, de un tamaño inferior a la mayúscula normal correspondiente a esa letra.
El valor por defecto para esta propiedad es ‘normal’ y el único valor alternativo que admite es ‘small-caps’, que convierte el texto a mayúsculas condensadas. Por ejemplo: p { font-variant:small-caps;}
PROPIEDAD SHORTHAND FONT
Al igual que con otras propiedades, CSS permite el uso de una propiedad shorthand denominada font donde se pueden declarar abreviadamente distintas propiedades relacionadas con las fuentes.
Recordar que hay que tener una precaución con las propiedades shorthand: un valor no declarado en la propiedad será sobreescrito a su valor por defecto. Si no tenemos esto en cuenta, podemos estar sobreescribiendo una propiedad sin darnos cuenta.
La sintaxis a emplear es la siguiente:
| selectorElemento {Valor-font-styleOpcional Valor-font-variantOpcional Valor-font-weightOpcional ValorFont-sizeObligatorio/ValorLine-heightOpcional valoresListaPrioridad-font-family } |
|
Ejemplo |
Significado |
|
p { font: 12px/2em sans-serif} |
El tamaño de letra se establece en 12 pixeles, el interlineado se establece en 2em y el tipo de letra es la familia genérica sans-serif. El resto de propiedades implicadas quedan establecidas a sus valores por defecto. |
|
#content1 { font: bold 1.3em "Trebuchet MS",Arial,Sans-Serif; } |
font-style será negrita (bold), el tamaño de letra 1.3em y se usará prioritariamente la fuente Trebuchet MS. Si no estuviera disponible se usaría Arial. Si no estuviera disponible se usuaría cualquier fuente de tipo Sans-Serif. El resto de propiedades implicadas quedan establecidas a sus valores por defecto. |
EJERCICIO
Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:
a) Deben exisitir tres contenedores (div1, div2 y div3) situados uno debajo de otro, cada uno con margin 33px en todas direcciones, con relleno 25 px en todas direcciones, ancho 100% del disponible, y borde sólido de 5 píxeles de anchura con color de borde rojo.
b) El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).
c) El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.
d) El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shorthand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .
Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
