автоматическое изменение размера текста (размер шрифта) при изменении размера окна?

Question

Я пытался (напрасно) создать страницу, размеры которой будут меняться при изменении размера окна. У меня это работает в css для изображений без проблем, но я не могу сделать то же самое для текста, и я не уверен, что это возможно даже в CSS. И я не могу найти скрипт jquery, который выполняет это.

Когда пользователь изменяет размеры окна, я, по сути, хочу, чтобы страница динамически и плавно масштабировалась, без необходимости вызывать масштабирование страницы. Это прекрасно работает на моих img divs через css, но не для текста, который остается того же размера.

Есть идеи?

Answer 1

Я должен был сделать это сам. Я установил базовый размер текста для тела и проценты для всех остальных размеров. Затем я использовал простой скрипт jQuery для изменения базового размера при изменении размера окна. Другие размеры затем обновляются.

Я использовал что-то вроде этого:

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

и в функции resizeMe у меня было это:

//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

Попробуйте плагин jQuery, например FitText . Он автоматически изменяет размер текста в соответствии с шириной родительского элемента.

Другой плагин jQuery с той же целью: BigText ( demo ).

Answer 3

Вы можете сделать это с CSS3 медиазапросами , указав различные базовые размеры шрифта в зависимости от размера браузера. Для этого есть хорошая статья на A List Apart

Для поддержки IE вы можете взломать его, используя CSS-выражения

Для этого требуется, чтобы вы использовали фиксированный базовый размер шрифта, например, для тега body, и процентные или em размеры в других местах.

Answer 4

Основываясь на ответе Лиззана, вот версия, использующая квадратный корень ширины и высоты , чтобы получить пропорциональное измерение:

// 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');

});

Демо: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

Answer 5

Рориф на правильном пути!

Media Queries является (одним из) ответом (ами).

Хитрость в том, чтобы использовать% для размеров шрифта везде, начиная с основного текста. Таким образом, размер шрифта наследуется, и когда вы меняете его в теле, он меняется везде.

Попробуйте что-то вроде:

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

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

Когда ширина сайта становится меньше 600 пикселей, размер шрифта превратится в 70% от того, что было везде, где используется% (также h1 в этом примере)

Answer 6

Я использую трюк из 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 7

Вы можете сделать изменяемый размер текста более простым. Это решение работает для меня. http://jsfiddle.net/VooDi/dka48dx8/

Для основного текста установлен размер шрифта, эквивалентный текущей ширине окна;

для jsfiddle 560 px;

body {
    font-size: 560px; 
}

ЯШ:

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

и для необходимого элемента установить размер шрифта в процентах

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

Вот и все. Надеюсь, это кому-нибудь поможет.

Answer 8

Lizzans ответ идеально!Оставьте -1 где это!Когда я его убрал, котята умирали повсюду.

Вместо переменной fontsize просто установите для нее стандартный размер шрифта для вашей страницы.Мой был 16.