CSS, formato de fuente - Jorge Sanchez · LMSGI-Unidad 1-Lenguajes de marcas Jorge Sánchez,...

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


@jorgesancheznet

[1] Bases del formato de fuente


@jorgesancheznet

Propiedades


@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


@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


@jorgesancheznet

[2] Propiedades para el formato de fuente en CSS


@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)


@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.


@jorgesancheznet

[3] Carga de tipos de letra


@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


@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”)

}


@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


@jorgesancheznet

Servicios on-line de tipografía

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


@jorgesancheznet

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


@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


@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

CSS, formato de fuente - Jorge Sanchez · LMSGI-Unidad 1-Lenguajes de marcas Jorge Sánchez,...

Documents

Transcript of CSS, formato de fuente - Jorge Sanchez · LMSGI-Unidad 1-Lenguajes de marcas Jorge Sánchez,...