| Por fuente entendemos aquel conjunto de signos que tienen unas características similares en cuanto a diseño, tamaño, apariencia y otros atributos, y que nos permite representar lo que escribimos en el ordenador. Evidentemente, unas fuentes determinadas deberán contener un signo para cada carácter de nuestro alfabeto, para cada número y para cada signo de puntuación o de cualquier otro tipo (matemático, lenguas sin caracteres latinos como el japonés). |
| Una aplicación del usuario (navegador) visual debe resolver las siguientes cuestiones antes de representar visualmente un carácter: |
| - ¿Está especificada, directamente o por herencia, una fuente para este carácter? |
| - ¿La aplicación del usuario (navegador) tiene disponible esta fuente? |
| - Si es así, ¿qué signo(s) le será asignado a este carácter o secuencia de caracteres? |
| - Si no, ¿qué se deberá hacer? ¿Deberá ser reemplazada por otra fuente?¿Puede recuperarse de la Web? |
| En CSS, en general, los autores especifican las características de una fuente a través de una serie de propiedades de la fuente, que estudiaremos ahora después. |
| ¿Y que es especificar una fuente? La especificación de la fuente tiene que ver con el modo en que los autores de hojas de estilo especifican qué fuentes deben ser usadas por una aplicación del usuario. En principio, parece que la manera obvia de especificar una fuente es por su nombre, una cadena simple -que da la impresión de estar separada en distintas partes-, por ejemplo "BT Swiss 721 Heavy Italic". |
| Desafortunadamente, no existe una taxonomía bien definida y universalmente aceptada para la clasificación de las fuentes en base a sus nombres, y los términos aplicados al nombre de una familia de fuentes pueden no ser apropiados para otras. Por ejemplo, el término 'itálica' es usado comúnmente para definir al texto inclinado, pero el texto inclinado también puede denominarse oblicuo, sesgado, inclinado o cursivo. De modo similar, los nombres de las fuentes típicamente contienen términos que describen el "peso" de una fuente. El principal rol de estos nombres es distinguir versiones de distinta densidad dentro de una misma familia de fuentes. No hay expresiones universalmente aceptadas para los distintos pesos y su utilización varía enormemente. Por ejemplo, una fuente que podría considerarse como negrita puede ser descrita como regular, media, semi-negra o ultra-negra, dependiendo de cuán negra sea la versión "normal" de la fuente dentro del diseño. |
| Esta ausencia de una denominación sistemática imposibilita, dentro del marco general, componer el nombre de una tipografía modificada que difiera en un sentido particular, como ser más negra. |
| Debido a esto, CSS usa un modelo diferente. Las fuentes son solicitadas no a través del simple nombre de la fuente sino por la vía de establecer una serie de propiedades de la fuente. Las propiedades de las fuentes pueden modificarse individualmente, por ejemplo para aumentar la densidad, y el nuevo conjunto de valores de las propiedades de la fuente será usado entonces para seleccionar nuevamente de la base de datos de las fuentes. El resultado es un incremento en la regularidad para los autores de hojas de estilo y los implementadores, y un aumento en la solidez. |
| CSS2 especifica las fuentes de acuerdo a estas características: |
|
 Font-family
|
La familia de fuentes especifica qué familia será usada para procesar visualmente el texto. Una familia de fuentes es un grupo de fuentes diseñadas para ser usadas en combinación y exhibiendo similitudes en su diseño. Un miembro de la familia puede ser cursiva, otra negrita, otra condensada o versalitas. Los nombres de familias de fuentes incluyen a "Helvetica", "New Century Schoolbook" y "Kyokasho ICA L". Los nombres de las familias de fuentes no se restringen a caracteres latinos. Las familias de fuentes pueden ser agrupadas en diferentes categorías: aquellas con o sin serif, aquellas cuyos caracteres están o no espaciados proporcionalmente, las que imitan la escritura manual, aquellas que son tipos de fantasía, etc.
|
Font-style |
El estilo de la fuente especifica si el texto será procesado visualmente usando un tipo en versión normal, itálica u oblicua. La itálica es la versión cursiva que acompaña al tipo normal, pero no tanto como para resultar una letra manuscrita. La oblicua es una versión inclinada del tipo normal y es usada más comúnmente en las sans-serif. Esta definición evita tener que denominar un tipo ligeramente inclinado como oblicuo o una tipografía griega normal como itálica.
|
Font-variant |
La variante de la fuente indica si el texto debe ser procesado visualmente usando los signos normales para los caracteres en minúsculas o usando versalitas para las minúsculas. Una fuente particular puede contener sólo signos en minúsculas, sólo versalitas o ambos tipos de signos; esta propiedad se usa para solicitar la fuente apropiada y, si la fuente contiene ambas variantes, el signo apropiado.
|
Font-weight |
El peso de la fuente se refiere al grado de solidez o de ligereza de los signos usados para procesar visualmente el texto, con relación a otras fuentes en la misma familia.
|
Font-size |
El tamaño de la fuente se refiere al tamaño de la fuente desde una línea de base a otra cuando tiene asignada una interlinea normal (en términos CSS, esto es así cuando la propiedades 'font-size' y 'line-height' tienen el mismo valor).
|
| En todas las propiedades, excepto 'font-size', los valores de las medidas 'em' y 'ex' se refieren al tamaño de fuente del elemento actual. Para 'font-size', estas unidades de medida se refieren al tamaño de fuente del elemento padre. |
| |
FONT-FAMILY < nombre-de-la-familia > < familia-genérica > inherit |
| Esta propiedad especifica una lista de prioridades de nombres de familias de fuentes y/o nombres de familias genéricas. Para resolver el problema de que una sola fuente puede carecer de signos para mostrar todos los caracteres en un documento, o de que no todas las fuentes están disponibles en todos los sistemas, esta propiedad permite a los autores especificar un listado de fuentes, todas del mismo estilo y tamaño, que son probadas en sucesión para ver si contienen un signo para cierto carácter. Esta lista se llama un juego de fuentes. |
| Los valores que puede tomar son los siguientes: |
|
 < nombre-de-la-familia > (se pone 0, 1 o más veces) |
|
El nombre de una familia de fuentes de preferencia. En el ejemplo anterior, "Baskerville", "Heisi Mincho W3" y "Symbol" son familias de fuentes. Los nombres de las familias que contienen espacios en blanco deben ir entre comillas. Si se omiten las comillas, cualquier espacio en blanco antes y después del nombre de la fuente son ignorados y cualquier secuencia de espacios en blanco dentro del nombre de la fuente se convierte en su espacio simple. |
|
< familia-genérica > (se pone 0 o 1 vez, pero siempre al final) |
|
Son definidas las siguientes familias genéricas: 'serif', 'sans-serif', 'cursive', 'fantasy' y 'monospace' (se explican más abajo). Los nombres de las familias genéricas de fuentes son palabras clave y, por consiguiente, no deben ir entre comillas. |
|
Se recomienda a los autores a ofrecer una familia genérica de fuentes como última alternativa, para lograr mayor solidez. |
|
inherit |
|
Cada propiedad también puede tener un valor especificado como 'inherit', lo cual significa que, para un elemento determinado, la propiedad toma el mismo valor computado que la propiedad del padre del elemento. El valor heredado, que normalmente sólo se usa como un valor de respaldo, puede ser reforzado poniendo explícitamente 'inherit'. (ESTA DEFINICION ES VÁLIDA PARA TODAS LAS PROPIEDADES QUE ESPECIFIQUEN ESTE VALOR). |
| |
|
| Por ejemplo, un texto que contiene palabras en castellano mezcladas con símbolos matemáticos puede necesitar un juego de dos fuentes, una conteniendo letras y números latinos, la otra conteniendo los símbolos matemáticos. Aquí hay un ejemplo de un juego de fuentes conveniente para un texto que se espera que contenga caracteres latinos, en japonés y símbolos matemáticos: |
| BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif } |
| Los signos disponibles en la "Baskerville" (una fuente que cubre sólo los caracteres latinos) se tomarán de esa fuente, los signos japoneses serán tomados de la "Heisi Mincho W3" y los símbolos matemáticos vendrán de la "Symbol". Cualquier otra vendrá de la familia genérica 'serif'. (Si haces la prueba en tu PC, asegúrate de que tienes las tres familias de fuentes instaladas) |
| La familia genérica de fuentes se usará si una o más de las otras fuentes del juego de fuentes no está disponible. Aunque muchas fuentes proporcionan un signo para los "caracteres ausentes", típicamente un rectángulo blanco, como su nombre lo indica éste no debe ser considerada una equivalencia excepto en la última fuente de un juego de fuentes. |
| Pongamos un fichero html con la siguiente estructura: |
 |
| En este caso, si ejecutamos el código EJEMPLO, veremos que el texto encerrado en el tag H1 se verá en monospace y el resto del texto se visualizará de acuerdo a lo especificado para la etiqueta BODY. Si la familia de fuentes Arial existe para el navegador, la escogerá en primer lugar. Si no existe saltaría a la familia genérica de fuentes, que en este caso es la serif. |
| |
FONT-STYLE |
| Esta propiedad solicita la versión normal de una fuente (llamada también "romana" o "redonda") dentro de una familia. Básicamente especifica el estilo que va a tener la fuente representada, de entre los tres posibles: normal, oblique o italic. |
| Los valores que puede tomar son los siguientes: |
|
normal |
|
Especifica una fuente clasificada como 'normal' en la base de datos de fuentes de la AU (aplicación de usuario). |
|
oblique |
|
Especifica una fuente clasificada como 'oblique' en la base de datos de fuentes de la AU. Las fuentes que incluyan en sus nombres las expresiones Oblique, Slanted o Incline serán típicamente definidas como 'oblique' en la base de datos de fuentes de la AU. Una fuente definida 'oblique' en la base de datos de fuentes de la AU puede haber sido generada, en realidad, inclinando electrónicamente una fuente normal. |
|
italic |
|
Especifica una fuente clasificada como 'italic' en la base de datos de fuentes de la AU o, si esa no está disponible, una definida como 'oblique'. Las fuentes que incluyan en sus nombres las expresiones Italic, Cursive o Kursiv serán típicamente definidas como 'italic'. |
|
inherit |
|
Para un elemento determinado, la propiedad toma el mismo valor computado que la propiedad del padre del elemento. El valor heredado, que normalmente sólo se usa como un valor de respaldo, puede ser reforzado poniendo explícitamente 'inherit'. |
| |
|
| Pongamos un fichero html con la siguiente estructura: |
 |
| En este caso, si ejecutamos el código EJEMPLO, veremos el comportamiento de los tres tipos de estilo. Muchas veces, el estilo italic y el oblique se representan exactamente igual, como es el caso. |
| |
FONT-VARIANT |
| En una fuente small-caps, los signos para la letras minúsculas son iguales a las mayúsculas, pero en un tamaño menor y con proporciones ligeramente diferentes (en castellano se denominan versales o versalitas). |
| Los valores que puede tomar son los siguientes: |
|
normal |
|
Especifica una fuente que no está definida como versalita. |
|
small-caps |
|
Especifica una fuente definida como versalita. Si no está disponible una versalita genuina, las aplicaciones del usuario deberán simularla, por ejemplo tomando una fuente normal y reemplazando las letras minúsculas por mayúsculas reducidas. Como último recurso, los signos de las letras mayúsculas sin reducir de una fuente normal pueden reemplazar los signos de una fuente versalita de modo que el texto aparezca todo en mayúsculas. |
|
inherit |
|
Para un elemento determinado, la propiedad toma el mismo valor computado que la propiedad del padre del elemento. El valor heredado, que normalmente sólo se usa como un valor de respaldo, puede ser reforzado poniendo explícitamente 'inherit'. |
| |
|
| Pongamos un fichero html con la siguiente estructura: |
 |
| En este caso, si ejecutamos el código EJEMPLO, veremos el comportamiento de las letras en versalitas. Aunque a simple vista no lo parezca, las letras mayúsculas de ambos textos, tienen el mismo tamaño. |
| |
FONT-WEIGHT |
| La propiedad 'font-weight' especifica el peso de una fuente (cuan intensa es). |
| Los valores que puede tomar son los siguientes: |
|
100 a 900 |
|
Estos valores forman un secuencia ordenada, donde cada número indica un peso que es al menos tan fuerte como su predecesor. |
|
normal |
|
Igual a '400'. |
|
bold |
|
Igual a '700'. Es la típica negrita |
|
bolder |
|
El siguiente mayor. Especifica el siguiente peso que es asignado a una fuente que es mayor que el valor heredado. Si no existe tal peso, el resultado es simplemente el siguiente valor numérico (y la fuente permanece sin cambios), a menos que el valor heredado sea '900', en cuyo caso el peso resultante será también '900'. |
|
lighter |
|
El siguiente menor. Especifica el siguiente peso que es asignado a una fuente es más liviano que el valor heredado. Si no existe tal peso, el resultado es simplemente el siguiente valor numérico más liviano (y la fuente permanece sin cambios), a menos que el valor heredado sea '100', en cuyo caso el peso resultante será también '100'. |
|
inherit |
|
Para un elemento determinado, la propiedad toma el mismo valor computado que la propiedad del padre del elemento. El valor heredado, que normalmente sólo se usa como un valor de respaldo, puede ser reforzado poniendo explícitamente 'inherit'. |
| |
|
| Pongamos un fichero html con la siguiente estructura: |
 |
| En este caso, si ejecutamos el código EJEMPLO, veremos el comportamiento de los pesos de los caracteres. Evidentemente, el peso 400 y el normal, coinciden. Pero en todos los casos que yo he probado (unos cuantos) el bolder y el lighter no difieren el tamaño sobre la fuente anterior. Prueba tú con otras fuentes, modificando el FONT-FAMILY y a ver que tal. Si encuentras alguna, haz un comentario al final del tutorial. |
| |
LINE-HEIGHT |
| Si la propiedad es puesta en un elemento a nivel de bloque cuyo contenido está compuesto de elementos a nivel de línea, especifica la altura mínima de cada caja a nivel de línea generada. Si la propiedad es puesta en un elemento a nivel de línea, especifica la altura exacta de cada caja generada por el elemento (Excepto para los elementos a nivel de línea reemplazados, donde la altura de la caja está dada por la propiedad 'height'). En el siguiente ejemplo: |
| Los valores que puede tomar son los siguientes: |
|
normal |
|
Le dice a las aplicaciones del usuario que pongan como valor computado un valor "razonable" en base al tamaño de la fuente del elemento. El valor tiene el mismo significado que . Recomendamos un valor computado para 'normal' entre 1.0 y 1.2. |
|
< medida > |
|
La altura de la caja es puesta con esta medida. Los valores negativos son ilícitos. |
|
< numero > |
|
El valor computado de la propiedad es este número multiplicado por el tamaño de la fuente del elemento. Los valores negativos son ilícitos. De cualquier modo, el número, no el valor computado, es heredado. |
|
< porcentaje > |
|
El valor computado de la propiedad es este porcentaje multiplicado por el tamaño computado de la fuente del elemento. Los valores negativos son ilícitos. |
| |
|
| Es más fácil verlo con un ejemplo. Pongamos un fichero html con la siguiente estructura: |
 |
| En este caso, si ejecutamos el código EJEMPLO, creo que no quedarán dudas (he añadido el color rojo al fondo de las líneas para que se vea mejor). El valor numérico 1.0 y el porcentual 100% dan a la caja que contiene los textos el valor mínimo para que todos los caracteres estén contenidos dentro de dicha caja. A partir de ahí, valores superiores o inferiores amplian o disminuyen dicha caja, tal y como se ve en el ejemplo. |
| Las familias genéricas de fuentes son un mecanismo de apoyo, un medio para preservar algo de la intención de la hoja de estilo del autor cuando ninguna de las fuentes especificadas pueden ser seleccionadas. Para un óptimo control tipográfico, en las hojas de estilo deben usarse las fuentes con nombres propios. |
| Las cinco familias genéricas de fuentes se establecen para existir en todas las implementaciones CSS (estas no necesariamente tienen que asignar cinco fuentes concretas distintas). Las aplicaciones del usuario deben proveer de razonables opciones predeterminadas para las familias genéricas de fuentes, las cuales expresen las características de cada familia tanto como sea posible dentro de los límites permitidos por la tecnología subyacente. |
| Las aplicaciones del usuario son alentadas a permitir al usuario seleccionar opciones alternativas para las fuentes genéricas. |
| Estas son las FAMILIAS GENÉRICAS DE FUENTES: |
|
| serif |
Los signos de las fuentes con serif, tal como el término es usado en CSS, tienen rasgos con remates, con terminaciones acampanadas o biseladas. Las fuentes con serif son típicamente de espaciado proporcional (que cada letra ocupa un espacio en la página proporcional a su tamaño). A menudo tienen mayor variación entre los rasgos finos y gruesos que las fuentes de las familias 'sans-serif'. CSS utiliza el término 'serif' para aplicar a una fuente en cualquier tipo de escritura, aunque otros nombres resulten más familiares para algunas escrituras en particular, como Mincho (Japonés), Sung o Song (Chino), Pathang (Coreano). Cualquier fuente descrita de este modo puede usarse para representar la familia genérica 'serif'. |
|
EJEMPLOS DE FUENTES QUE SE AJUSTAN A ESTA DESCRIPCIÓN:
Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
|
| sans-serif |
Los signos de las fuentes sans-serif, tal como el término es usado en CSS, no tienen remates -sin formas acampanadas, trazos finales u otros ornamentos-. Las fuentes sans-serif son típicamente de espaciado proporcional (que cada letra ocupa un espacio en la página proporcional a su tamaño). A menudo tienen menor variación entre los rasgos finos y gruesos, comparadas con las fuentes con serif. CSS utiliza el término 'sans-serif' para aplicar a una fuente en cualquier tipo de escritura, aunque otros nombres resulten más familiares para algunas escrituras en particular, como Gothic (Japonés), Kai (Chino), Totum o Kodig (Coreano). Cualquier fuente descrita de este modo puede usarse para representar la familia genérica 'sans-serif'. |
|
EJEMPLOS DE FUENTES QUE SE AJUSTAN A ESTA DESCRIPCIÓN:
MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
|
| cursive |
Los signos de las fuentes cursive, tal como el término es usado en CSS, generalmente tienen rasgos unidos u otra característica cursiva más marcada que los tipos itálicos. Los signos están parcial o completamente conectados y el resultado se asemeja más a la escritura manual o de pincel que a un tipo impreso. En algunos sistemas de escritura, como el arábigo, las fuentes son casi siempre cursivas. CSS usa el término 'cursive' para ser aplicado a una fuente en cualquier tipo de escritura, aunque otros nombres como Chancery, Brush, Swing y Script son también usados en los nombres de las fuentes. |
|
EJEMPLOS DE FUENTES QUE SE AJUSTAN A ESTA DESCRIPCIÓN:
Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
|
| fantasy |
Las fuentes de fantasía, tal como el término es usado en CSS, son principalmente decorativas pero siguen representando caracteres (en oposición a las fuentes de símbolos, que no representan caracteres). |
|
EJEMPLOS DE FUENTES QUE SE AJUSTAN A ESTA DESCRIPCIÓN:
Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
|
| monospace |
El único criterio para reconocer una fuente monospace es que todas los signos ocupan un mismo espacio horizontal constante. (Esto puede hacer que algunos sistemas de escritra, como el arábigo, tengan un estilo más peculiar.) El efecto es similar al de las máquinas de escribir manuales y es a menudo utilizada para ilustrar los ejemplos de códigos de computadora. |
|
EJEMPLOS DE FUENTES QUE SE AJUSTAN A ESTA DESCRIPCIÓN:
Courier, MS Courier New, Prestige, Everson Mono |
Español
English
