Плагин jQuery для автоматического масштабирования текста

В адаптивных интерфейсах заголовки должны выделяться при любом разрешении экрана.

FitText - простой и функциональный плагин jQuery для масштабирования размера текста в соответствии с шириной определенного элемента.

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

Плагин для масштабирования текста

Как использовать

Процедура использования плагина стандартная. Подключаем к странице библиотеку jQuery, код плагина, и запускаем его для нужного элемента:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  $("#responsive_headline").fitText();
</script>

Размер текста будет изменяться на основании размера родительского элемента. По умолчанию используется коэффициент для размера  1/10 от ширины родительского элемента.

 

Изменение коэффициента

Если изменение шрифта вас не устраивает, то можно использовать настройку коэффициента:

$("#responsive_headline").fitText(1.2); // Увеличиваем степень изменения размера шрифта
$("#responsive_headline").fitText(0.8); // Уменьшаем степень изменения размера шрифта

 

Устанавливаем ограничения для изменений

FitText дает возможность ограничить изменения размера шрифта заданием минимального minFontSize и максимального maxFontSize значений.

$("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })

 

Замечания по CSS

  • Элементы с масштабируемым шрифтом должны иметь свойства display: block; или display: inline-block; с заданной шириной, например, width: 100%.
  • Для лучшего вида нужно производить настройки коэффициента.
  • FitText игнорирует размер шрифта, установленный в CSS, но его лучше использовать для браузеров с отключенным JavaScript.

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Сентября 2011 19:36
    12312312312
    скажу как китайцы! Сапр!
  • 12 Сентября 2011 20:08
    Ygreec
    Я - за подстраивание текста под размеры, но спрошу: почему для этого не подходит CSS @media-screen? или это сделано чтобы старые браузеры тоже могли слушаться?
    • 7 Сентября 2012 08:24
      c01nd01r
      IE до 9 не поддерживает MQ. Вот и выбирай... Подключать костыль для MQ, а потом подгонять размеры шрифтов для разрешений или подключить эту либу и подогнать один раз коэффициенты изменения.
  • 12 Сентября 2011 20:51
    Сергей Запрудов
    Круто! Спасибо!
  • 25 Августа 2012 12:10
    IONEX
    Криво работает, даже скаченная последняя версия. Для одинакового размера надписей приходится на глазок подбирать коэффициент для различных селекторов Пример: $(content_a).fitText(1); $(content_p).fitText(6); $(content_strong).fitText(1.2); $(content_ol).fitText(5); если для всех задать один и тот же коэффициент (и даже если объеденить селекторы одной переменной) размер текста каждого может быть произвольный
  • 8 Января 2013 22:20
    vlg64
    Не работает код...
  • 22 Мая 2014 13:29
    skif1965
    Код не работает
^ Наверх ^