Можно ли задать размер шрифта относительно размера страницы?

Есть ли способ сделать font-size относительно размера страницы? Применение процента в качестве единицы относится к стандартным размерам шрифта (например, 90% от 12 пикселей, а не 90% страницы!). Это отличается от поведения большинства других тегов.

Любой способ сделать масштаб страницы "вверх и вниз" также шрифтами? Должен ли я полагаться на em?

Спасибо

Ответы

Ответ 1

Нет, вы не можете установить размер шрифта в процентах относительно размера страницы.

Размер в em основан на размере относительно того, как обычно будет отображаться шрифт в 16 точках.

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

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

Ответ 2

См. новые единицы CSS vh и vw. Поддержка браузера еще невелика.

http://snook.ca/archives/html_and_css/vm-vh-units

Недавно он появился в WebKit: https://bugs.webkit.org/show_bug.cgi?id=27160

В браузерах, поддерживающих его, 1 vh составляет 1% (1/100) высоты окна просмотра, а 1 vw - 1% (1/100) ширины окна просмотра. Существуют также единицы vmin и vmax, которые представляют собой меньшую из двух и более крупных из них соответственно.

Ответ 3

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

Еще один плагин jQuery с той же целью - BigText (demo).

Ответ 4

Вот немного script Я сделал для exacly что (используйте его как резерв, когда vw не поддерживается) https://gist.github.com/2475269

Ответ 5

Еще один неидеальный ответ заключается в том, чтобы использовать серию таких контрольных точек css:

h1 { font-size: 22px; color: orange; }
@media only screen and (max-width: 900px) {
  h1 { font-size: 20px; color: blue; }
}
@media only screen and (max-width: 800px) {
  h1 { font-size: 18px; color: green; }
}
@media only screen and (max-width: 700px) {
  h1 { font-size: 12px; color: red; }
}

http://jsfiddle.net/8RKhp/

Ответ 6

На мой взгляд, диапазон видимых плотностей пикселей, наблюдаемый зрителем веб-страницы, теперь массивный, от HTC One, который удерживается на расстоянии 12 дюймов от лица, где имеется 5600 пикселей/радиан, возможно, на 50-дюймовом плазменном экране работает на 480p, что составляет около 950 пикселей/радиан на 4 фута.

Или иначе, шрифт 20px почти в 6 раз больше в вашем поле зрения на этом плазменном экране, чем последний телефон.

Решение, которое я приготовил, состояло в том, чтобы установить размер шрифта тела в абсолютных пикселях как кратность window.screenWidth, но ограничить его до минимального количества единиц, а затем использовать em для всех размеров шрифта после этого. Правильное использование заголовков em должно означать, что доступность прекрасна.

Я добавляю эту функцию на страницу (или ее JS), чтобы установить размер:

function setFontSize() {
    pagesized = window.innerWidth / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    document.body.style.fontSize = pagesized; // Set body default font size
}

Для выполнения этой работы в тег body добавляется следующее:

<body onresize="setFontSize()" onload="setFontSize()">

Затем вы просто используете свой CSS (или встроенное форматирование) на основе% или em единиц, и все должно хорошо масштабироваться в пределах этих границ.

Или, в JQuery, вы можете сделать:

$(window).resize(function() {
    pagesized = $(window).innerWidth() / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    $('body').css('font-size', pagesized); // Set body default font size
});

Ответ 7

Как минимум для Firefox, 1em можно использовать для установки размера шрифта, связанного с размером шрифта родителя. Поэтому, если вы установите размер шрифта для тела в значение, которое находится в соотношении к размеру страницы. Все шрифты под телом, которые используют "em" в качестве единицы, будут относиться к странице.

Чтобы сделать это, вы должны установить размер тела относительно страницы типа height: 100% или width, если вы хотите связать размер с шириной.

Затем вам придется постоянно синхронизировать высоту тела с размером шрифта. Это можно сделать с помощью 'onResize'.

Подробнее см. в ссылка.

Ответ 8

Я рекомендую использовать YUI reset, чтобы унифицировать рендеринг шрифтов в разных браузерах. Затем проверьте размер шрифта YUI. После этого вы можете полагаться на свои шрифты, чтобы отображать их правильно.

Ответ 9

Вы можете решить это следующим образом:

jQuery(document).ready(function ($) {

// Dynamisches Skalieren von Schriften
fontSize = function(){
//ww = $(window).innerWidth();
ww = $('.mainhead').innerWidth(); // Width of the Motherelement
one = ww/100; // 1%
multiplcator = one*31; 
$('.mainhead').css({'font-size': multiplcator+'px'});
}
fontSize();



$(window).resize(function() {
fontSize();
});

});

Когда вы теперь устанавливаете свой Fontsize через css, он разыгрывается во всех браузерах, таких как charm

.mainhead{
width:48%;
font: normal 2em Times, Verdana, sans-serif;

}

Ответ 10

Я знаю, что на это уже был дан ответ, но мне нужно поделиться этим на будущее comers, потому что мне потребовались несколько минут, чтобы понять это.

Так как mr @random сказал: em как единица, сделает трюк.

Если вы хотите, чтобы ваша страница масштабировалась вверх и вниз и сохраняла какую-то масштабную шкалу для себя, ящики и шрифт, а затем устанавливая его в em, будут в порядке.

Инициализируйте свой body с помощью 1em как font-size, что означает 100%

body {
      font-size: 1em; 
}

Затем установите свой элемент font-size в процентах от его родительского

.your_element {
 font-size:0.4em /* for example 40% if its parent font-size */
}

Теперь magic из @media запросов

@media all and (max-width: 767px) {
  body {
    font-size: 0.4em !important;
  }
}

@media all and (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 0.6em !important;
  }
}

@media all and (min-width: 1024px) and (max-width: 1199px) {
  body {
    font-size: 0.8em !important;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  body {
    font-size: 1em !important;
  }
}

@media all and (min-width: 1600px) and (max-width: 1999px) {
  body {
    font-size: 1.2em !important;
  }
}

@media all and (min-width: 2000px) and (max-width: 2999px) {
  body {
    font-size: 1.6em !important;
  }
}

@media all and (min-width: 3000px) and (max-width: 3999px) {
  body {
    font-size: 1.8em !important;
  }
}

@media all and (min-width: 4000px) {
  body {
    font-size: 2em !important;
  }
}

И Бинго, хорошо провести день.

Ответ 11

Когда вы говорите "относительно размера страницы", что именно вы имеете в виду "размер страницы"?

В окне браузера? Тогда ваши шрифты изменили бы размер, когда пользователь изменит размер окна - определенно не то, что можно было бы ожидать, и очень плохо для удобства использования. Люди не изменяют размер окон, чтобы увидеть большее или меньшее изображение всего сайта, они увеличивают их, чтобы увидеть большую часть сайта, и сделать окна меньше, чтобы увидеть конкретный небольшой раздел и иметь место для других окон рядом с браузером.

Если вы имеете в виду размер экрана, это еще хуже, потому что это будет означать огромные шрифты на экране 30 дюймов. Но люди не покупают 30-дюймовые экраны, чтобы они могли видеть огромные шрифты, они покупали их, чтобы увидеть несколько окон бок о бок.

В целом, использование em или что-то similay - единственный разумный способ сделать масштабируемый веб-сайт, поскольку он будет масштабироваться относительно размера по умолчанию, который должен/должен быть относительно того, что пользователь может с комфортом читать.