HTML

CSS

Texto y Tipografía

Las dificultades que históricamente han existido en relación al uso de tipos de letra en páginas web se debía principalmente, a que los navegadores se venían basando en un archivo de fuente instalada en el propio ordenador del usuario y no se podía garantizar que el usuario tuviera disponible la fuente que especificaba el programador o diseñador.

@FONT-FACE CSS

Para superar la limitación de tener que depender de las fuentes disponibles por parte de cada usuario se creó la regla @font-face que permite especificar un nombre y la localización (url) de un archivo con la fuente que se desea usar en una página web.

De esta manera, cambia el concepto tradicional, ya que con @font-face podremos usar fuentes que hemos definido y localizado nosotros mismos, sin depender de las fuentes de que disponga el usuario.

Ten en cuenta que @font-face está disponible en todos los navegadores modernos, pero que versiones antiguas de navegadores no admiten el uso de esta regla, de ahí que siempre debamos especificar una familia tipográfica genérica como alternativa de seguridad  para el caso de que una fuente especificada no pueda cargarse.

REGLA @FONT-FACE

Una fuente es un archivo informático con la información necesaria para que un sistema operativo o programa puede mostrar un tipo de letra determinado.

Por ejemplo, en Windows se dispone de la fuente “Arial” gracias a que dentro del sistema de archivos existe un archivo denominado arial.ttf. Si borramos ese archivo, la fuente deja de estar disponible. El tipo (formato o extensión) del archivo puede variar de unos sistemas a otros: extensiones habituales son ttf, otf, woff, svg, etc.

REGLA @FONT-FACE

La extensión woff (Web Open Font Format) ha sido creada específicamente como tipo de fuente para desarrollos web y aspira a convertirse en un estándar. Sin embargo, la realidad es que no existe todavía un formato de archivo estándar que se haya impuesto para todos los navegadores.

El uso básico de la regla @font-face conlleva definir dos parámetros: por un lado, el “alias” o nombre con el que vamos a designar a la fuente cuando la empleemos en nuestras reglas CSS. Por otro lado, la ruta donde se localiza el archivo que contiene la fuente.

La sintaxis básica a emplear es de este tipo:@font-face {font-family: "nombreDeFuente";    src: url(nombreDeArchivo.extension); }

REGLA @FONT-FACE

Debido a que la regla @font-face se ha ido introduciendo en los últimos años y los diferentes navegadores han ido admitiendo formatos de fuentes distintos poco a poco, un “truco” al que recurren muchos diseñadores y programadores para garantizar que la mayor parte de navegadores usen la fuente deseada es especificar las rutas de los archivos fuente en distintos formatos, de modo que se usará el primero en ser reconocido por el navegador.

Ejemplo@font-face { font-family: Sansat;src: url('Sansation_Light.woff'), url('Sansation_Light.ttf'), url('Sansation_Light.eot') ; }

REGLA @FONT-FACE

La regla @font-face permite que se especifique si se debe buscar la fuente primero en el ordenador del usuario y usarla en caso de estar disponible, antes que usar una fuente especificada mediante un archivo. Para ello se especifica el origen como local(“nombreDeFuenteEnSistemaUsuario”).

Ejemplo@font-face { font-family: Sansat; src: local(“Sansation Light”), url('Sansation_Light.woff'), url('Sansation_Light.ttf'), url('Sansation_Light.eot') ; }

REGLA @FONT-FACE

Existen diferentes páginas web donde se ofrecen archivos de fuentes gratuitos. Es difícil decir cuál es la página que ofrece las mejores fuentes, entre otras cosas porque en estas páginas hay cambios continuos y se van incorporando nuevas fuentes y nuevos formatos continuamente.

Fuentes externas

Muchas veces las fuentes que tenemos disponibles para descarga están en un solo formato como ttf y para asegurarnos de que se visualicen bien deseamos disponer de ellas en varios formatos. Los formatos más usados son: WOFF, EOT, TTF, OTF y SVG.. Hay varios tipos de fuentes para web:◦ woff - Web Open Font Format (.woff)◦ truetype (.ttf)◦ opentype (.otf)◦ embedded-opentype (.eot)◦ svg (.svg, .svgz)

En principio usando TTF y EOT nos garantizamos que nuestra fuente sea reconocida por la mayoría de los navegadores, aunque si buscamos el máximo de seguridad convendría incluir los cinco formatos.

Fuentes externas

Fuentes externas

La regla @font-face se ha introducido en los últimos años y su estandarización todavía no es suficiente, aunque su uso es cada vez más amplio. Te podrás encontrar con situaciones como que:

a) Un determinado navegador no reconozca la regla @font-face, con lo cual recurrirá a la fuente estándar que hayas definido, o si no la has definido, a la fuente por defecto.b) Un determinado navegador no reconozca el formato de la fuente que hayas indicado.c) Un determinado navegador no responda bien a la sintaxis que hemos descrito y sea necesario aplicar “un parche” o código específico para ese navegador.d) Algunas reglas CSS no se aplican bien con un determinado formato de fuente. Por ejemplo, quizás te encuentres que al aplicar text-transform: uppercase; con algunas fuentes no te funcione.

PROBLEMAS CON @FONT-FACE

Los em son escalables mientras que los rem apuntan directamente al tamaño del body.

EjemploP{

font-size: 3em;}

Tamaño de fuente em y rem

Los valores para font-weight pueden ser 100, 200, 300, 400, 500, 600, 700, 800, normal, lighter, bold y bolder.

Las palabras reservadas tiene su equivalencia: normal = 400, bold = 700, bolder = 900 y lighter = 100.

El grosor de la fuente, también depende de la configuración de la fuente seleccionada.

EjemploP{font-weight: normal;}

Grosor de Fuente

Los valores para font-style pueden ser normal, italic u oblique.

EjemploP{

font-style: normal;}

Estilo de Fuente

Los valores para text-align pueden ser left, right, center o justif.

EjemploP{

text-align : center;}

Alineación de Texto

Interlineado de texto (espacio entre lineas)

EjemploP{ line-height: normal; (valor por defecto)}

P{ line-height: 40px;}

Altura de Línea

Los valores para text-decoration pueden ser normal o none, underline, overline o line-through.

EjemploP{ text-decoration: none;}

Las etiquetas a traen por defecto subrayado y lo quitamos aplicando text-decoration: none;

Subrayado de Texto

Los valores para text-transform pueden ser capitalize, uppercase o lowercase.

EjemploP{

text-transform : uppercase ; }

Transformaciones de Texto

También podemos darle a font-variant el valor small-caps

EjemploP{

font-variant: small-caps; }

Transformaciones de Texto

Para lograr efecto de tabulacion, en los parrafos, se utiliza la propiedad text-indent

EjemploP{

text-indent: 50px; }

Indentación de Texto

EjemploP{letter-spacing: 50px; (mayor espacio entre letras)word-spacing: 15px; (mayor espacio entre palabras)}

P{letter-spacing: -2px; (menor espacio entre letras)word-spacing: -9px; (menor espacio entre palabras)}

Espacio entre letras y entre palabras

CSS

Bordes

Los tres atributos fundamentales para establecer el borde a un elmento son: border-width: indica la anchura del bordeborder-style: indica el tipo del borde (solid, dashed, double, dotted, inset, outset o none)border-color: indica el color del borde

Estos atributos pueden resumirse en una sola linea con la estructura border: anchura estilo color. Ejemplo: border 2px solid red;

Así mismo se puede aplicar a un borde concreto con border-top-style o border-left-color, etc.

Estilos básicos

Se puede establecer el radio de curbatura de las esquinas de forma igualada, pero tambien se pueden hacer curvaturas avanzadas especificando en qué esquina se aplicarán y cual será el radio en el eje X y en el eje Y para aplicar el radio de la esquina.

Código CSSborder-radius: 20px;border-top-left-radius: 30px (radio horizontal)10px (radio vertical)

Border-radius

Usar una imagen como color de border.

Border-image: url(../imagen.jpg)20 (cantidad de px que deseo que se muestre de la imagen seleccionada como border)Repeat/stretch (comportamiento);Border-width: 15px;

Border-image

CSS

Fondos

Para posicionar el fondo de un elemento tenemos 3 opciones: border-box (desde el borde), padding-box (desde la zona del padding) y content-box (desde la zona del contenido)

EjemploBorder 10px solid transparent;Background: url(..0/imagen.jpg)Background-origin: paddin-box/border-box/content-box

Background-origin

Colocar varias imágenes de fondo.

Border: 10px solid black;background-color: green;background: url(..0/firma.gif),url(..0/imagen.jpg);Background-repeat: no-repeat, repeat;Background-position: right-bottom, center center;

Múltiples Imágenes

Disposición de gradiente:Left, right, top, bottom

Border: 10px solid black;background-color: green;Background: -moz-linear-gradient(left, black 0%, orange 20%, blue 80%, green 100%)

OLeft 40deg, right 30deg

Degradados Lineales

Se agrega la nomenclatura de grados (deg)

Border: 10px solid black;background-color: green;Background: -moz-linear-gradient(left 30deg, black 0%, orange 20%, blue 80%, green 100%)

Degradados Lineales - Diagonal

Navegadores Soportados

  background: red;   /*Safari*/  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);  /*Opera*/  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);  /*Firefox */  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);  /*Standard*/  background: repeating-linear-gradient(red, yellow 10%, green 20%);

Repitiendo un linear-gradient

background: red; /* Safari */background: -webkit-radial-gradient(center, circle, red, yellow, green); /* Opera */background: -o-radial-gradient(center, circle, red, yellow, green);   /* Firefox */background: -moz-radial-gradient(center, circle, red, yellow, green); /* Standard */background: radial-gradient(center, circle, red, yellow, green);

Degradados Circulares

¿Preguntas?

Emmanuel OrtizConsultor Sr.emmanueltiz@gmail.comemail  / gtalkemmanueltizSkype