17

Скажите, можно ли сделать шрифт на сайте резиновым — размер которого будет изменяться в зависимости от изменения размеров браузера?

Deleted
  • 371
ahel73
  • 495
  • 1
    Можно. Самому, как я понимаю, будет вам сложно. Поэтому, можете использовать готовые плагины, например, этот FlowType. – Deonis Aug 28 '14 at 20:36
  • Да, именно это я и имел в виду. А чтобы самому делать, где можно посмотреть? Хотелось бы самому понимать. У нас же, насколько я знаю, размер шрифта в процентах не привязывается к размеру браузера или контейнера. – ahel73 Aug 28 '14 at 20:39
  • @ahel73, это через js делается, последний раз, когда я смотрел в эту сторону, это был просто подбор ширины делением/умножением на два (flowtype судя, по исходнику этим не занимается, а значит, на экзотических шрифтах может весьма сильно ошибаться). – zb' Aug 28 '14 at 20:46
  • @ahel73, ну там решался вопрос умещения строки в блок определенной ширины. Делали так: перебором находили оптимальный размер шрифта (так, чтобы не вылазил за ширину блока и был при этом максимального размера), делается это примерно как в алгоритме отгадывания числа - берем заведомо много, - если вылазит делим попалам, если не вылазит, добавляем половину от разницы того, что вылазил, к тому, что не вылазил, как только результат становится меньше минимального шага, считаем последний "не вылазит" за ответ. – zb' Aug 28 '14 at 20:59
  • Наверное, нет, можно попробовать сымитировать с помощью calc, но что-то я не уверен. – zb' Aug 28 '14 at 21:16
  • @ahel73, в общем случае так, но иногда нужно смотреть в профайлер. – zb' Aug 28 '14 at 21:31
  • @ahel73, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). – Deleted Aug 29 '14 at 06:02

1 Answers1

26

Да, можно. Даже без вмешательства javascript. Вот так:

.demo {
    font-size: 3vw; /* 3% of viewport width */
}

Обязательно прочитайте вот эту статью:

Viewport Sized Typography

Browser Support
IE 9+, Firefox 19+, Chrome 20+, Safari 6+, Opera 23+

VenZell
  • 19,872