jquery - que - tamaño de letra en word en centimetros

cambiar automáticamente 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.

¿Algunas ideas?

Answer 1

Puede hacer esto con las consultas de medios de CSS3 , especificando diferentes tamaños de fuente de acuerdo con el tamaño del navegador. Hay un buen artículo para esto en A List Apart

Para soporte de IE, puede ser que pueda hackearlo usando expresiones CSS

Esto requiere que utilice un tamaño de fuente base fijo, por ejemplo en la etiqueta del body , y el porcentaje o tamaños basados ​​en em cualquier otro lugar.

Answer 2

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

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

Answer 3

¡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. El mío fue 16.

Answer 4

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 5

roryf está en el camino correcto!

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

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

Pruebe algo como:

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

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

Cuando el ancho del sitio web se reduce a 600px, el tamaño de la fuente cambiará al 70% de lo que era en todas partes, donde se usa el% (también h1 en este ejemplo).

Answer 6

Sobre la base de la respuesta de Lizzan, aquí hay una versión que usa la raíz cuadrada de ancho y alto 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 7

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.

Usé algo como esto:

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

y en la función resizeMe, 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 8

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

Para body set font-size, 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 el elemento necesario establecer el tamaño de fuente en porcentaje

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

Eso es todo. Espero que esto ayude a alguien.