cambiar el tamaño del texto (tamaño de fuente) al cambiar el tamaño de la ventana?

Question

He intentado (en vano) crear una página cuyos elementos cambiarían de tamaño a medida que cambiaba el tamaño de la ventana. Lo tengo trabajando en CSS para las imágenes no hay problema, pero no puedo lograr lo mismo para el texto, y no estoy seguro de que sea posible en CSS. Y parece que no puedo encontrar un script de jquery que logre esto.

Cuando un usuario cambia el tamaño de la ventana, esencialmente quiero que la página se escale de forma dinámica y fluida, sin que el usuario tenga que invocar el zoom de la página. Esto funciona bien en mi img divs a través de css, pero no para el texto, que se mantiene del mismo tamaño.

¿Alguna idea?

Answer 1

He tenido que hacer esto yo mismo. Lo que hice fue establecer un tamaño de texto base para el cuerpo y porcentajes para todos los demás tamaños. Luego utilicé una secuencia de comandos jQuery simple para cambiar el tamaño de la base en el cambio de tamaño de la ventana. Los otros tamaños se actualizan también.

que utiliza algo como esto:

$(function() { 
    $(window).bind('resize', function() 
    { 
     resizeMe(); 
     }).trigger('resize'); 
    }); 

y en el ResizeMe-función, tuve esto:

//Standard height, for which the body font size is correct 
var preferredHeight = 768; 
//Base font size for the page 
var fontsize = 18; 

var displayHeight = $(window).height(); 
var percentage = displayHeight/preferredHeight; 
var newFontSize = Math.floor(fontsize * percentage) - 1; 
$("body").css("font-size", newFontSize); 

Answer 2

Usted puede hacer esto con CSS3 media queries, especificando base diferentes tamaños de fuente en función de tamaño del navegador Hay un buen artículo para esto en A List Apart

Para soporte IE es posible que pueda entrar ilegalmente en él usando CSS expressions

Esto requiere el uso de una base fija de tamaño de fuente, por ejemplo en la etiqueta body, y el porcentaje o em tamaños basados ​​en otro lugar.

Answer 3

Pruebe un plugin jQuery como FitText. Ajusta automáticamente el texto para que se ajuste al ancho del elemento principal.

Otro complemento jQuery con el mismo objetivo es BigText (demo).

Answer 4

¡La respuesta de Lizzans es perfecta! Deje el -1 donde está! Los gatitos estaban muriendo por todo el lugar cuando lo quité.

En lugar de la variable fontsize, simplemente configúrela para el tamaño de fuente estándar de su página. 16. El mío era

Answer 5

estoy usando el truco de http://practicaltypography.com/end-credits.html#bio M. Butterick:

<style type="text/css"> 
<!--adattamento font-size a browser width--> 
     @media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}} 
<!--body-format--> 
      body { 
     max-width:1000px; 
     min-width:520px; 
     line-height:1.33em; 
     margin:1em; 
     background-color:#f7f7f7; 
     font-family:Source Sans Pro; 
     color:#361800; 
     } 
    </style> 

Answer 6

roryf está en el camino correcto!

Media Queries es (una de) la (s) respuesta (s).

El truco aquí es usar% para los tamaños de fuente en todas partes comenzando por el cuerpo. De esta forma, el tamaño de fuente se hereda y cuando lo cambias en cuerpo, se cambia en todas partes.

intentar algo como:

body { font-size: 100% } 
h1 {font-size: 200% } 

@media all and (max-width:600px) { 
    body {font-size: 70%} 
} 

Cuando el ancho de página web se hace más pequeño y luego 600px, entonces el tamaño de la fuente se convertirá en el 70% de lo que estaba en todas partes, donde se utiliza% (H1 también en este ejemplo.)

Answer 7

Sobre la base de la respuesta de Lizzan, aquí hay una versión que utiliza el raíz cuadrada de la anchura y la altura para obtener un tamaño proporcional:

// When document has finished loading 
$(document).ready(function() { 

    var resizeText = function() { 
     // Standard height, for which the body font size is correct 
     var preferredFontSize = 180; // % 
     var preferredSize = 1024 * 768; 

     var currentSize = $(window).width() * $(window).height(); 
     var scalePercentage = Math.sqrt(currentSize)/Math.sqrt(preferredSize); 
     var newFontSize = preferredFontSize * scalePercentage; 
     $("body").css("font-size", newFontSize + '%'); 
    }; 

    $(window).bind('resize', function() { 
     resizeText(); 
    }).trigger('resize'); 

}); 

Demostración: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

Answer 8

Puede hacer que el texto resizible más simple. Esta solución funciona para mí. http://jsfiddle.net/VooDi/dka48dx8/

Para el conjunto de cuerpo de tamaño de fuente, equivalente al ancho interno de su ventana actual;

para jsfiddle 560 px;

body { 
    font-size: 560px; 
} 

JS:

onresize=onload=function() { 
    document.body.style.fontSize=window.innerWidth+"px" 
} 

y para necesaria elemento de establecer el tamaño de fuente en por ciento

<h1 style="font-size:5%">Resize this text!!!!</h1> 

todo eso es. Espero que esto ayude a alguien.