Las propiedades que nos permiten personalizar los textos de una página web son muchas, algunas las usamos habitualmente pero hay otras que son bastante desconocidas.Para empezar, hay una propiedad genérica que ayuda a definir varias propiedades de manera simultánea. La propiedad font es una forma reducida de establecer font-style, font-variant, font-weight, font-size, line-height y font-family.
sintaxis en HTML
elemento {font: valores;}
por ejemplo: div {font: italic small-caps bold 12pt serif;}
sintaxis en JAVASCRIPT
elemento.style.font='valores';
por ejemplo: this.style.font='italic small-caps bold 12pt serif';
Donde cada valor se separa del otro mediante un espacio.
Por defecto, su valor es: normal normal normal medium normal "Times New Roman" y es una propiedad que se "hereda", es decir, si un elemento contiene a otro, el contenido tendrá las mismas propiedades que el contenedor.
Veamos una por una.
La propiedad font-family establece el nombre de la fuente de los textos.
sintaxis en HTML
elemento {font-family: valor;}
por ejemplo: div {font-familiy: arial, sans-serif;}
sintaxis en JAVASCRIPT
elemento.style.fontFamily='valor';
por ejemplo: this.style.fontFamily='arial, sans-serif';
Una "familia" es un grupo de fuentes de características similares. Cada "miembro" de la familia puede ser cursiva, negrita, condensada, etc. Las familias de fuentes pueden ser agrupadas en categorías: con o sin serif, con o sin caracteres espaciados proporcionalmente, etc.
Cualquier nombre de una fuente válida es aceptado; por ejemplo:
Times, Helvetica, Zapf-Chancery, Western, Courier
También pueden usarse nombres genéricos:
serif, sans-serif, cursive, fantasy o monospace
El valor puede ser también una lista separada por comas y para evitar confusiones, los nombres que tienen varias palabras se deben escribir entre comillas. Las listas se utilizan porque no podemos saber cuáles son las fuentes instaladas en el navegador de quien va a mirar la página y por eso, establecemos alternativas; si se encuentra la primera, se mostrará esa, sino, la segunda y así sucesivamente siendo lo más prudente, terminar con un nombre genérico.
La propiedad font-size establece el tamaño de la fuente de texto.
sintaxis en HTML
elemento {font-size: valor;}
por ejemplo: div {font-size: 12px;}
sintaxis en JAVASCRIPT
elemento.style.fontSize='valor';
por ejemplo: this.style.fontSize='12px';
Los valores que podemos utilizar son muy variados; pueden ser: xx-small, x-small, small, medium, large, x-large, xx-large. También se puede utilizar smaller o larger para indicar una fuente de un tamaño inmediatamente menor o inmediatamente mayor.
Lo más común es utilizar unidades fijas o proporcionales: cm, mm, in, pt, pc, px, em o ex o un porcentaje.
La propiedad font-style establece el estilo de la fuente.
sintaxis en HTML
elemento {font-style: valor;}
por ejemplo: div {font-style: italic;}
sintaxis en JAVASCRIPT
elemento.style.fontStyle='valor';
por ejemplo: this.style.fontStyle='italic';
Los valores posibles son: normal, italic u oblique.
La itálica es la versión cursiva del tipo normal. La oblicua es una versión inclinada del tipo normal y comúnmente se usa con las sans-serif.
La propiedad font-variant establece si la fuente se muestra en modo mayúsculas pequeñas. Es decir, todos los caracteres se convierten en mayúsculas pero el tamaño es menor que el tamaño de la fuente normal.
sintaxis en HTML
elemento {font-variant: valor;}
por ejemplo: div {font-variant: small-caps;}
sintaxis en JAVASCRIPT
elemento.style.fontVariant='valor';
por ejemplo: this.style.fontVariant='small-caps';
Los valores posibles son: normal o small-caps.
La propiedad font-weight establece el grosor de las fuentes.
sintaxis en HTML
elemento {font-weight: valor;}
por ejemplo: div {font-weight: 900;}
sintaxis en JAVASCRIPT
elemento.style.fontWeight='valor';
por ejemplo: this.style.fontWeight='900';
Los valores posibles son: normal , lighter, bold y bolder. También pueden usarse algunos valores numéricos: 100, 200, 300, 400, 500, 600, 700, 800 y 900 donde 400 equivale a normal y 700 a bold.
Las variaciones dependen del tipo de fuente y muchas veces es difícil notar las diferencias.
Las dos propiedades que faltan son bastante desconocidas.
La propiedad font-size-adjust también establece el tamaño de la fuente; en realidad, el tamaño y la legibilidad de una fuente depende menos del valor dado a font-size que de la proporción entre su ancho y su alto. Esa relación (tamaño de la fuente dividido por la altura de la letra x), es llamada x-height. Cuanto más grande sea ese valor menos legible será la fuente si se trata de fuentes pequeñas.
sintaxis en HTML
elemento {font-size-adjust: valor;}
por ejemplo: div {font-size-adjust: 0.8;}
sintaxis en JAVASCRIPT
elemento.style.fontSizeAdjust='valor';
por ejemplo: this.style.fontSizeAdjust='0.8';
Los valores posibles son: none o un número que especifica esa relación.
Esta imagen muestra varias tipografías en un mismo tamaño de fuente (11pt. a 72 ppi), junto con sus valores de relación
Esta otra imagen muesta el resultado de font-size-adjust
La propiedad font-stretch permite condensar o estrechar una fuente; selecciona un tipo normal, condensado o expandido de una familia de fuentes.
sintaxis en HTML
elemento {font-stretch: valor;}
por ejemplo: div {font-stretch: ultra-expanded;}
sintaxis en JAVASCRIPT
elemento.style.fontStretch='valor';
por ejemplo: this.style.fontStretch='ultra-expanded';
Los valores posibles son: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded o ultra-expanded donde ultra-condensed es más estrecho y ultra-expanded es el más ancho.
También pueden usarse las palabras clave wider o narrower. wider modifica el valor al siguiente más expandido mientras que narrower lo hace al siguiente más condensado.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. |
MÁS INFORMACIÓN:
SUMARIO:
10 comentarios:
Creo que todo lo que escribes tiende a mostrar lo mucho que sabes, una especie de jactancia exclusivista para eruditos del código.
Una lástima, pues mucho menos conocimiento expuesto con mayor generosidad didática ayudaría a quienes como yo, buscamos un poco de claridad de conceptos.
Eres un genio, pero no tienes por qué demostrarlo en cada post.
Saludos
Numero uno, no soy un maestro, ni un profesor así que no pretendo de ninguna manera ser didáctico, no tengo por que serlo. Tampoco este blog pretende ser "de ayuda" ni nada parecido, sólo cuento lo que hago y como lo hago, sólo digo lo que pienso y porqué lo pienso. Si alguien pregunta, trato de contestar, eso es todo. Yo, no enseño nada, sólo comparto.
Numero dos, es bastante poco inteligente dejar comentarios de este tipo, no suman nada, no aportan nada, si algo que alguien hace, no me gusta, suelo darme la vuelta e ir para otro lado. Es fácil juzgar sobre todo, amparándose en la cobardía del anonimato.
Numero tres, mi abuela decía lo mismo: "niño, eres un genio" pero, nadie le creía ... claro, todas las abuelas dicen lo mismo.
Número cuatro ... no, no hay número cuatro, tres es suficiente.
con el tiempo que "pierdes" y encima en vez de gracias te `piropea, asi vamos
jeje buena respuesta!
oye, yo si tengo una pregunta.. estoy aprendiendo ahora a hacer hojas de estilo, y ahorita diseñando una página se me ocurrió intentar expander las palabras que tengo en una celda de una tabla al ancho de la celda... es una tablita muy sencilla de una columna y 5 filas y en cada fila tengo una palabra, pero sería interezante saber si se puede expandir éstas palabras al ancho de las celdas respectivamente.. se puede? pensé que tal vez el font-expand funcionaría, pero hasta ahora no ha dado resultado!
Gracias, felíz tarde!
La propiedad font-expand no existe, por lo menos, hasta donde yo sé.
En principio, las fuentes sólo pueden agrandarse y para eso hay dos propiedades: font-size y font-size-adjust. Siempre se agrandan más so menos proporcionalmente así que si quieres que sean más anchas, también serán más altas.
No sé si eso te sirva, me parece entender que sólo quieres que se expandan en un sólo sentido y eso, no veo cómo poder hacerlo.
hola buenas, quisiera saber si se puede cargar una fuente externa, (que no este alojada en el pc), desde una server????
saludos.
Siempre, todo lo que está en una página web, debe estar en un servidor, si sólo están en nuestra PC, lo veos nosotros y nadie más.
Se pueden usar fuentes externas pero con muchas restricciones y no en todos los navegadores. Es un tema muy complejo. Puede verse algo de eso en:
http://www.alistapart.com/articles/cssatten
Estuve probando colocar las propiedades de las fuentes en una sola linea, pero el blog colapsó y tuve que volver a separar los estilos uno por uno. Blogger no los acepta en una sola línea?
Otra cosa, esto no encaja en este tema, y aunque lo parezca, no es un foro :D pero allá va:
Te acordas de <data:blogTeamBlogMessage/> ??
Supuestamente es lo que controla el mensaje de "Su comentario ha sido publicado" o "Se ha guardado su comentario y podrá visualizarse una vez que el propietario del blog lo haya aprobado."
En mi blog, probé moderar los comentarios y el mensaje éste no aparecía. Quité la moderación y ahora aparece. Raro, no?
egoloco:
No, no hay ninguna restricción al respecto, es perfectamente aceptado. Es probable entonces, que haya un error en al sintaxis, que los valores no estén ordenados correctamente, que no estén separados por espacios o que la declaración no termine con punto y coma. Estoy enumerando los errores más comunes que todos solemos cometer pero, puede hacerse.
Lo del mensaje, no me extraña. Es decir, funciona mal y eso no es de extrañar en lese formualri ode Blogger :D Nada puede hacerse al respecto, o por lo menos, lo desconozco; es algo que manejan llos a discresión.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...