En diseño web cada vez encontramos más diseños en los que se combinan distintos tamaños de fuente. Esta práctica tan utilizada en diseño impreso, ahora y quizás debido a los blogs, se ve reflejada en muchos de los mejores diseños que vemos por la red.
Echando un vistazo a CSSTricks he encontrado un interesantísimo artículo en el que nos cuentan como cambiar el tamaño de la fuente de un párrafo en función de la cantidad de letras que contiene.
Chri Coyier, el autor de esta idea, nos cuenta cómo hacerlo usando javascript y nos deja dos ejemplos, uno usando Mootools y el otro usando jQuery.
A continuación os dejo los dos ejemplos, y os recomiendo que echéis un vistazo al post, porque de los comentarios también podréis aprovechar más de una idea que simplifica el código.
MOOTOOLS:
window.addEvent('domready',function() {
$quote = $$('.post p')[0];
var $numWords = $quote.get('text').split(' ').length;
if (($numWords >= 1) && ($numWords < 10)) {
$quote.setStyle('font-size','36px');
}
else if (($numWords >= 10) && ($numWords < 20)) {
$quote.setStyle('font-size','32px');
}
else if (($numWords >= 20) && ($numWords < 30)) {
$quote.setStyle('font-size','28px');
}
else if (($numWords >= 30) && ($numWords < 40)) {
$quote.setStyle('font-size','24px');
}
else {
$quote.setStyle('font-size','20px');
};
});
jQUERY:
$(function(){
var $quote = $(".post p:first");
var $numWords = $quote.text().split(" ").length;
if (($numWords >= 1) && ($numWords < 10)) {
$quote.css("font-size", "36px");
}
else if (($numWords >= 10) && ($numWords < 20)) {
$quote.css("font-size", "32px");
}
else if (($numWords >= 20) && ($numWords < 30)) {
$quote.css("font-size", "28px");
}
else if (($numWords >= 30) && ($numWords < 40)) {
$quote.css("font-size", "24px");
}
else {
$quote.css("font-size", "20px");
}
});
EJEMPLOS:
- Un ejemplo en jQuery lo podemos ver en http://quotesondesign.com
- Otro ejemplo, esta vez con Mootools, lo podemos encontrar en CSSTrick
no entiendo como hay que adaptarlo a un div me podrian dar una idea por afvor gracias!!