PDF de programación - CSS, formato de fuente

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 marcas

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[1] Bases del formato de

fuente

LMSGI-Unidad 1-Lenguajes de marcas

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Propiedades

LMSGI-Unidad 1-Lenguajes de marcas

Jorge 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 marcas

Jorge 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 marcas

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[2] Propiedades para el
formato de fuente en CSS

LMSGI-Unidad 1-Lenguajes de marcas

Jorge 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 marcas

Jorge 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 marcas

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[3] Carga de tipos de letra

LMSGI-Unidad 1-Lenguajes de marcas

Jorge 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 marcas

Jorge 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 marcas

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

@font-face

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

LMSGI-Unidad 1-Lenguajes de marcas

Jorge 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 marcas

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[4] Propiedades de formato

de texto (párrafo)

LMSGI-Unidad 1-Lenguajes de marcas

Jorge 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 marcas

Jorge 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 letra
text-shadow: color distanciaX distancia Y desenfoque;
• word-wrap. Con el valor break-word permite partir
palabras muy largas

LMSGI-Unidad 1-Lenguajes de marcas

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet