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
Top Related