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

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

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

Для поддержки IE вы могли бы взломать его с помощью CSS expressions

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

Answer 3

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

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

Answer 4

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

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

Answer 5

Я использую трюк с http://practicaltypography.com/end-credits.html#bio М. 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 находится на правильном пути!

Запросы на средства массовой информации (один из) ответов (ответов).

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

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

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

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

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

Answer 7

Опираясь на ответ Lizzan, вот версия с использованием квадратного корня из обеих ширины и высоты получить пропорциональное изменение размера:

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

Вы можете сделать resizible текст более простой. Это решение работает для меня. 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> 

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