PDF de programación - CSS, formato de fuente

Imágen de pdf CSS, formato de fuente

CSS, formato de fuentegráfica de visualizaciones

Publicado el 14 de Diciembre del 2019
124 visualizaciones desde el 14 de Diciembre del 2019
1,1 MB
16 paginas
Creado hace 3a (30/07/2016)
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
  • Links de descarga
http://lwp-l.com/pdf17037

Comentarios de: CSS, formato de fuente (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad