css, formato de fuente -...

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

CSS, formato de fuente

LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[1] Bases del formato de fuente

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Propiedades

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Propiedades

•Línea base. Línea horizontal imaginaria donde se asientan las letras•Ascendente. Línea horizontal imaginaria que marca la máxima altura de la letra•Descendente. Línea horizontal imaginaria que marca la máxima zona inferior de la letra• Interlineado. Distancia vertical entre cada línea• Interletrado. Distancia horizontal entre letra y letra

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Propiedades

• Kerning. Distancia relativa entre letra y letra (varía según las letras)•Cuerpo. Tamaño horizontal de cada letra• Familia. Gama de letras:

• Serif• Sans-serif• Cursive• Fantasy• Monosespaced

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[2] Propiedades para el formato de fuente en CSS

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Propiedades CSS

• font-size. Tamaño de letra• font-family. Tipo de letra. Se puede especificar una lista (separada por comas), el último elemento de la lista debe de ser una familia genérica• font-weight. Grosor• font-style. Estilo (normal, italic u oblique)• font-variant. Normal u small-caps (VERSALES)

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Propiedades CSS

• line-height. Interlineado• font-stretch. Anchura de letra• font. Permite poner de golpe todas las anteriores. Uso:• font: estilo variant grosor tamaño/interlineado familia;

• color.

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[3] Carga de tipos de letra

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

@font-face

• Permite importar letras. • El problema es que no todos los navegadores soportan todos

los formatos• Formatos:• ttf. TrueType (Mozilla y Chrome)• otf. OpenType (Mozilla y Chrome)• eot. Internet Explorer•woff. Mozilla y últimos navegadores (estándar abierto)• svg. Formato vectorial estándar

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

@font-face

@font-face{font-family:nombreQueLeDamosALaLetra;font-weight:grosorLetra;font-style:estiloLetra;src:url(rutaArchivoEOT);src:

local(nombreLocal),url(rutaEOT?#iefix)

format(“embedded-opentype”),url(rutaWOFF) format(“woff”),url(rutaTTF) format(“truetype”),url(rutaSVG#nombreLetra) format(“svg”)

}

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

@font-face

•http://www.fontsquirrel.com/tools/webfont-generatorPágina para preparar nuestras letras de forma automática para ser incluidas en una página web

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Servicios on-line de tipografía

•Google fonts•Adobe TypeKit• fontdeck•webtype• fonts.com

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[4] Propiedades de formato de texto (párrafo)

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Propiedades

•word-spacing. Espacio entre palabras• letter-spacing. Espacio entre letras• text-decoration. underline, overline, line-through u none•vertical-align. Alineación vertical• text-align. left, right, center o justify• text-indent. Sangría de 1ª línea• text-transform. none, uppercase, lowecase, capitalize

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Propiedades

•direction. De izquierda a derecha (ltr) o al revés (rtl)• text-overflow. clip, ellipsis. Permite recortar el texto• text-shadow. Sombreado de la letratext-shadow: color distanciaX distancia Y desenfoque;•word-wrap. Con el valor break-word permite partir palabras muy largas