GuilleSQL :: Microsoft SQL Server, SSIS, y más !!

Web Fonts, CSS, y HTML


Quienes tengan experiencia en el Desarrollo Web conocerán las posibilidades de utilización de las Fuentes, algo disponible desde hace bastantes años, que permite especificar qué fuentes deseamos utilizar en el texto de nuestra página Web, siempre y cuando dicha fuente esté instalada en el equipo del usuario que está visualizando nuestra página. Posteriormente, nacieron las Web Fonts, mediante las cuales, es posible publicar las fuentes en Internet y así poder utilizarlas, independientemente de que estén instaladas en los equipos de los usuarios.

Originalmente podíamos utilizar la propiedad font-family de CSS para especificar qué fuente deseábamos utilizar, algo que sólo funcionaba si la fuente en cuestión estaba instalada en los equipos de los usuarios, motivo por el cual se podían especificar varias fuentes (el navegador intentará utilizar la primera fuente disponibles).

p { font-family : “Times New Roman”, Times, serif; }

Las Fuentes que podremos utilizar dependerán en muchos casos del Sistema Operativo y del Software instalado en los equipos de los usuarios. A continuación se comentan los distintos tipos de fuentes, así como se incluyen algunos ejemplos del valor que podríamos utilizar en la propiedad font-family. Es importante tener en cuenta que algunas fuentes no admiten variaciones (ej: negrita y/o cursiva).

  • Serif. Destacan por tener como unos pequeños piececillos al final de sus extremos, originado en las antiguas fuentes tradicionales. Ejemplos:
    • Georgia, "Times New Roman", Times, serif
    • Baskerville, "Palatino Linotype", Times, serif
    • "Hoefler Text", Garamond, Times, serif
  • Sans-Serif. Destacan por una apariencia sencilla y vértices en punta (sin pies). Ejemplos:
    • Verdana, Arial, Helvetica, sans-serif
    • Geneva, Arial, Helvetica, sans-serif
    • Tahoma, "Lucida Grande", Arial, sans-serif
    • "Trebuchet MS", Arial, Helvetica, sans-serif
    • "Century Gothic", "Gill Sans", Arial, sans-serif
  • Otros tipos de fuentes.
    • "Courier New", Courier, monospace
    • "Lucida Console", Monaco, monospace
    • "Copperplate Light", "Copperplate Gothic Light", serif
    • "Marker Felt", "Comic Sans MS", fantasy
    • Arial Black
    • Arial Narrow
    • Impact

Introducción a las Web Fonts

Actualmente, la mayoría de los navegadores ya soportan las Web Fonts, lo cual, hace que cada vez sean más interesantes, más aún con el aumento del ancho de banda en el acceso a Internet que se ha producido en los últimos años (hay que tener en cuenta que el usuario tendrá que descargárselas). Quizás el principal inconveniente es que muchas fuentes tienen Licencias que prohíben explícitamente su utilización en la Web, aunque igualmente, otras muchas podremos utilizarlas.

Existen varios formatos de fuentes que podremos utilizar, de los que al menos, deberíamos ser capaces de proporcionar EOT, WOFF, y True Type:

  • Embedded Open Type (EOT). Sólo funcionan con Internet Explorer.
  • True Type (*.ttf) y Open Type (*.otf). Es el formato más común, soportado en IE9+, Firefox, Chrome, Safari, Opera, iOS Safari 4.2+, Android, y Blackberry.
  • Web Open Font Format (WOFF). Nuevo formato comprimido diseñado para la Web, soportado por IE9+, Firefox, Chrome, Safari, Opera, iOS Safari 5+ y Blackberry (falta Android).
  • Scalable Vector Graphic (SVG). Realmente no es un formato de fuente, sino un formato gráfico. No está soportado por Internet Explorer ni Firefox.

Afortunadamente, existen muchas Web desde la que podemos descargarnos Web Fonts de forma gratuita (ojo, otras son de pago), o que en su defecto hospedan Web Fonts que podemos utilizar, como son los siguientes casos.

En el caso particular de Google Fonts, disponemos de un Wizard que permite seleccionar las fuentes, y que nos generará el código (HTML/CSS) que tendremos que pegar en nuestra Web para utilizar las Web Fonts de Google que hemos seleccionado. Hecho esto, ya podremos crear nuestros estilos utilizando las Google Fonts.

Si lo necesitamos, podemos utilizar el servicio Generador de Fuentes de Font Squirrel (@font-face Generator), que nos permitirá realizar un upload de un fichero de fuente (ej: True Type), para seguidamente generar/convertir a los diferentes formatos de fuentes (ej: WOFF, EOT, etc.), lo cual, puede resultarnos de gran utilidad. Podemos acceder a este servicio en la siguiente URL: Squirrel Font-Generator

Algo que también nos resultará de gran utilidad disponer de Fuentes de Iconos (Icon Fonts), ya sea de terceros o creadas por nosotros mismos.

Utilizando las Web Fonts en CSS

Para utilizar las Web Fonts en nuestras Hojas de Estilo CSS, deberemos utilizar la directiva @font-face (en la que si lo deseamos, podremos incluir diferentes formatos de fuente, de tal modo que el navegador se descargará la primera que entienda) para seguidamente poder utilizar la fuente de la forma convencional.

Debemos tener en cuenta que para cada variación (negrita, cursiva, o negrita-y-cursiva) necesitaremos utilizar una directiva @font-face, en la que deberemos incluir las propiedades font-weight (normal ó bold) y font-style (normal ó italic) para saber a qué variación se corresponde dicha directiva @font-face. Por lo tanto, si deseamos utilizar una Web Font en sus distintas variaciones (normal, negrita, cursiva, negrita-y-cursiva) necesitaremos incluir cuatro directivas @font-face, y los usuarios se descargarán cuatro fuentes. A continuación se muestra un ejemplo de una directiva @font-face.

@font-face {
   font-family: 'GuilleSQL';
   src: url('GuilleSQL Regular.eot');
   src: url('GuilleSQLRegular.eot?#iefix') format('embedded-opentype'),
      url('GuilleSQLRegular.woof') format('woff'),
      url('GuilleSQLRegular.ttf') format('truetype'),
      url('GuilleSQLRegular.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}

En consecuencia, podríamos crear cuatro directivas @font-face (una para cada variación), asignando a todas ellas el mismo valor de font-family (ej: GuilleSQL), así como el valor que corresponda para las propiedades font-weight (normal ó bold) y font-style (normal ó italic). Sin embargo, esta técnica no funcionaría en IE8 (ni IE9 en Modo de Compatibilidad).

Como alternativa compatible con IE8, podríamos crear cuatro directivas @font-face (una para cada variación), asignando a cada una ellas un valor distinto de font-family (ej: GuilleSQL, GuilleSQLnegrita, GuilleSQLcursiva, etc), y omitiendo las propiedades font-weight y font-style. Seguidamente, deberíamos especificar varios estilos, como en se muestra en el siguiente caso de ejemplo:

  • p { font-family: GuilleSQL; font-style: normal; font-weight: normal: }
  • p em { font-family: GuilleSQLcursiva; font-style: normal; font-weight: normal: }
  • p strong { font-family: GuilleSQLnegrita; font-style: normal; font-weight: normal: }

Otra alternativa, sería evitar la utilización de variaciones de nuestra Web Font. Por poner un ejemplo, podemos utilizar una fuente regular en los encabezados h1. En este caso, podríamos crear un estilo para los encabezados h1 que especifique la utilización de la fuente que deseamos en su variación normal (font-weight: normal), evitando de esta manera la utilización de la variación negrita, como sería el caso por defecto. Evidentemente, esto nos puede funcionar con encabezados, pero con párrafos de texto libre, no será tan buena idea perder el resto de variaciones.

h1 {
   font-family: GuilleSQL;
   font-weight: normal;
}

Estableciendo el color y tamaño de las fuentes

La forma de establecer el color de la fuente en una Hoja de Estilos CSS es utilizando la propiedad color, la cual nos permitirá utilizar diferentes sintaxis al establecer su valor:

  • Hexadecimal. Es el método tradicional, introduciendo los valores RGB en hexadecimal. Ej: color: #3300FF
  • RGB. Permite establecer los valores RGB en decimal o como un porcentaje. Ej: color: rgb(20%, 0%, 100%) ó color: rgb(45, 0, 255)
  • RGBA: RGB con nivel de transparencia. Permite establecer los valores RGB, junto con un cuarto valor entre 0 y 1 que indica el nivel de transparencia (0 es transparente y 1 es opaco). Ej: color: rgba(45, 0, 255, .5). Debe tenerse en cuenta que IE8 (y versiones anteriores) no entienden RGBA. Como Workaround puede utilizarse dos veces la propiedad color, la primera estableciendo un valor RGB (lo entenderán todos los navegadores) y la segunda estableciendo un valor RGBA (para quién pueda entenderlo).
  • HSL. Permite establecer los valores HSL (Hue, Saturation, Lightness – Matiz, Saturación, Luminosidad). El primer valor debe estar comprendido entre 0 y 360, y los dos siguientes son porcentajes. Un color puro debe tener un valor del 50% de Luminosidad. Ej: color: hsl(0, 100%, 50%)
  • HSLA: HSL con nivel de transparencia. Permite establecer los valores HSL, junto con un cuarto valor entre 0 y 1 que indica el nivel de transparencia (0 es transparente y 1 es opaco). Ej: color: hsl(0, 100%, 50%, .5)

Del mismo modo, la forma de establecer el tamaño de la fuente en una Hoja de Estilos CSS es utilizando la propiedad font-size, la cual nos permitirá utilizar diferentes unidades de medida:

  • Píxeles. Quizás la forma más tradicional. Ej: font-size: 32px
  • Palabras clave (keywords). Podemos utilizar los siguientes valores: xx-small, x-small, small, medium, large, x-large, xx-large. Ej: font-size: large
  • Porcentajes. Se trata de un valor relativo que además es heredable. Ej: font-size: 200%. Si tenemos listas HTML anidadas con un font-size del 200%, si partimos de un tamaño base de fuente de 18px, la primera lista utilizará un tamaño de 36px, mientras que la segunda lista utilizará un tamaño de 72px.
  • EMS. Similar al porcentaje. De hecho, es como dividir el valor de un porcentaje entre 100, ya que por ejemplo, un 200% equivale a 2em. En consecuencia, se trata de un valor relativo que además es heredable. Ej: font-size: 2em.

Otras opciones de formato

A continuación comentamos otras opciones de formato que pueden resultarnos de utilidad.

  • Negrita. Por defecto el texto en el interior de las etiquetas <strong>, <b>, <th>, y <h1>-<h6> se muestra en negrita, un comportamiento que podemos sobrescribir al establecer la propiedad font-weight al valor bold o al valor normal. Ej: font-weight: bold. Otra alternativa es establecer la propiedad font-weight a un valor numérico comprendido entre 900 (extremadamente negrita) y 100 (extremadamente fina), como se hace por ejemplo con las Google Fonts.
  • Cursiva. Por defecto el texto en el interior de las etiquetas <em> e <i> se muestra en cursiva, un comportamiento que podemos sobrescribir al establecer la propiedad font-style al valor italic o al valor normal. Ej: font-style: italic.
  • Letras Capitales. Tenemos la opción de mostrar el texto utilizando letras mayúsculas o minúsculas, estableciendo la propiedad text-transform al valor uppercase o al valor lowercase. Ej: text-transform: uppercase. Dado que se trata de una propiedad heredable, también podremos necesitar establecer la propiedad text-transform a none.
  • Decoraciones del texto. Es posible añadir una línea inferior (subrayado), una línea superior, una línea media (tachado), e incluso hacer que el texto parpadee, para lo cual podemos establecer la propiedad text-decoration a alguno de sus valores: underline, overline, line-throught, o blink. Debe tenerse en cuenta que pueden establecerse varios valores simultáneamente. Ej: text-decoration: underline overline; Además, se trata de una propiedad heredable, por lo que podremos necesitar establecer la propiedad text-decoration a none. Ej: text-decoration: none; Este tipo de estilos son útiles en muchos casos, como por ejemplo al establecer los estilos de los enlaces. Ej: a:hover { text-decoration: none; }
  • Espaciado de Letras. Es posible reducir el espaciado entre letras utilizando un valor negativo para la propiedad letter-spacing (ej: letter-spacing: -2px) o ampliarlo utilizando un valor positivo (ej: letter-spacing: .7em).
  • Espaciado de Palabras. Es posible reducir el espaciado entre palabras utilizando un valor negativo para la propiedad word-spacing (ej: word-spacing: -1px) o ampliarlo utilizando un valor positivo (ej: word-spacing: 2px).
  • Sombras de Texto. Es posible añadir una sombra al texto utilizando la propiedad text-shadow, la cual requiere de cuatro valores: posición X (horizontal offset), posición Y (vertical offset), amplitud (blurriness), y color. Ej: text-shadow: -2px 2px 2px #999999. Incluso es posible definir varias sobras simultáneamente, consiguiendo efectos bastantes interesantes. Ej: text-shadow: -2px 2px 2px #999999, 2px -2px 2px #999999. Desafortunadamente, se trata de una propiedad CSS3 que no funciona en IE9. Para más info de cómo sacarle provecho a las sombras de texto con CSS3 ver Fun with CSS3 Text Shadow Property.

También tenemos disponible la propiedad font que permite establecer de forma simultánea las propiedades font-style, font-variant, font-weight, font-size, line-height, y font-family, aunque las únicas propiedades obligatorias son font-size y font-family. Ejemplos:

  • font: italic bold small-caps 18px/150% Georgia, Times, serif;
  • font: 150% Arial, Helvetica, sans-serif;
  • font: normal normal normal 1.5em/normal Arial;

Partiendo de aquí, tan sólo nos queda darle rienda suelta a nuestra imaginación. Por ejemplo:

  • Sabemos que los encabezados <h1>-<h6> se muestran en negrita, por lo que si deseamos resaltar texto dentro de ellos podemos crear un estilo h1 strong { color: #3300FF;}. De este modo, podemos resaltar el texto etiquetado como negrita existente dentro de un encabezado.
  • En lugar de utilizar el subrayado (text-decoration: underline) es posible utilizar el borde inferior (ej: de un DIV, TD o de un LI), lo cual nos permitirá controlar el color, grosor, y ubicación del borde.

Formateando párrafos, encabezados y demás

Algunas opciones de formato están orientadas a utilizarlas con párrafos, encabezados y otros elementos, como es el caso de las siguientes propiedades de estilo.

  • Espacio entre líneas del mismo párrafo. Es posible utilizar la propiedad line-height para especificar el espaciado entre las líneas de un mismo párrafo, pudiendo utilizar como unidades píxeles, ems, o porcentajes, siendo recomendable utilizar ems o porcentajes, ya que ajustan el espaciado entre líneas en función del tamaño de la fuente. Ej: line-height: 200%. También es posible especificar un valor numérico sin indicar la unidad, lo que se interpretará como un multiplicador. Ej: line-height: 2
  • Alineación del texto. Es posible utilizar la propiedad text-align para especificar cómo deseamos alinear el texto: left, right, justify, ó center. Ej: text-align: justify
  • Indentación o sangrado del texto. Es posible utilizar la propiedad text-indent para especificar la indentación o sangrado del texto, pudiendo utilizar como unidades píxiles, ems (en base al tamaño de fuente) o porcentajes (en base al ancho del elemento que contiene el texto). Ej: text-indent: 20px
  • Márgenes. También podemos configurar los márgenes, por ejemplo, para cambiar el espaciado entre párrafos, para lo cual podemos utilizar las propiedades margin-top y margin-bottom. Así, podríamos eliminar el espaciado entre párrafos utilizando un estilo como p { margin-top:0; margin-bottom:0; }. Debido a que no todos los navegadores utilizan los mismos valores para los márgenes, suele ser recomendable configurarlos en nuestra Hoja de Estilos para garantizar que conseguimos el aspecto deseado.

Despedida y Cierre

Hasta aquí llega el presente artículo, que en cierto modo, es una continuación de otros artículos recientes también relacionados con el Desarrollo Web:

Poco más por hoy. Como siempre confío que la lectura resulte de interés. 

 


[Fecha del Artículo (UTC): 26/05/2013]
[Autor: GuilleSQL]



Escribir un Comentario

Para poder escribir un comentario, debe Iniciar Sesión con un usuario.

Si no dispone de un usuario, puede Registrarse y hacerse miembro.

Si dispone de un usuario, pero no recuerda sus credenciales de acceso, puede Restablecer su Contraseña.

Miembros de
Miembros de GITCA (Global IT Community Association)

Menu de Usuario
  Iniciar Sesión
  Registrarse
  Restablecer Contraseña
  Ventajas de Registrarse

Acerca de
  Contigo desde Oct 2007
  771 usuarios registrados
  86146 pageloads/mes
  Ranking Alexa 498160

Social Networks
Sigue a Portal GuilleSQL en Linkedin !!
Sigue a Portal GuilleSQL en Twitter !!



Archivo

Junio de 2017 (3)
Mayo de 2017 (1)
Marzo de 2017 (3)
Enero de 2017 (4)
Junio de 2016 (1)
Mayo de 2016 (2)
Abril de 2016 (2)
Septiembre de 2015 (2)
Agosto de 2015 (2)
Junio de 2015 (10)
Mayo de 2015 (4)
Abril de 2015 (8)
Marzo de 2015 (11)
Octubre de 2014 (3)
Septiembre de 2014 (7)
Agosto de 2014 (5)
Julio de 2014 (2)
Mayo de 2014 (4)
Abril de 2014 (4)
Marzo de 2014 (4)
Febrero de 2014 (1)
Enero de 2014 (5)
Diciembre de 2013 (8)
Noviembre de 2013 (2)
Octubre de 2013 (7)
Septiembre de 2013 (6)
Agosto de 2013 (1)
Julio de 2013 (6)
Junio de 2013 (11)
Mayo de 2013 (7)
Abril de 2013 (6)
Febrero de 2013 (5)
Enero de 2013 (7)
Diciembre de 2012 (12)
Noviembre de 2012 (13)
Octubre de 2012 (5)
Septiembre de 2012 (3)
Agosto de 2012 (6)
Julio de 2012 (4)
Junio de 2012 (1)
Mayo de 2012 (2)
Abril de 2012 (7)
Marzo de 2012 (16)
Febrero de 2012 (9)
Enero de 2012 (5)
Diciembre de 2011 (10)
Noviembre de 2011 (10)
Octubre de 2011 (4)
Septiembre de 2011 (5)
Agosto de 2011 (2)
Julio de 2011 (2)
Junio de 2011 (4)
Mayo de 2011 (2)
Abril de 2011 (6)
Marzo de 2011 (4)
Febrero de 2011 (10)
Enero de 2011 (5)
Diciembre de 2010 (6)
Noviembre de 2010 (4)
Octubre de 2010 (8)
Septiembre de 2010 (4)
Agosto de 2010 (1)
Julio de 2010 (3)
Mayo de 2010 (5)
Abril de 2010 (6)
Marzo de 2010 (8)
Febrero de 2010 (3)
Enero de 2010 (1)
Diciembre de 2009 (9)
Noviembre de 2009 (14)
Octubre de 2009 (2)
Septiembre de 2009 (8)
Agosto de 2009 (2)
Julio de 2009 (10)
Junio de 2009 (9)
Mayo de 2009 (10)
Abril de 2009 (9)
Marzo de 2009 (3)
Febrero de 2009 (2)
Enero de 2009 (3)
Noviembre de 2008 (2)
Octubre de 2008 (2)
Septiembre de 2008 (2)
Agosto de 2008 (5)
Julio de 2008 (5)
Junio de 2008 (1)
Mayo de 2008 (3)
Abril de 2008 (2)
Marzo de 2008 (2)
Febrero de 2008 (2)
Enero de 2008 (5)
Noviembre de 2007 (2)
Octubre de 2007 (2)






Esta información se proporciona "como está" sin garantías de ninguna clase, y no otorga ningún derecho.
This information is provided "AS IS" with no warranties, and confers no rights.

Copyright © 2007 GuilleSQL, todos los derechos reservados.
GuilleSQL.com y GuilleSQL.net son también parte de Portal GuilleSQL.

Visitas recibidas (Page Loads) en GuilleSQL (fuente: StatCounter):

screen resolution stats
Visitas