Адаптивный текст с FitText.js

Как работает плагин

Для начала подключим скрипт.
Вот и пример:

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

Теперь ваш текст становится адаптивным. По умолчанию его размер равен 1/10 от ширины элемента текста.
Но у скрипта есть несколько настроек, позволяющих регулировать адаптивность текста.

Компрессор

Если вам не нравится качество преобразования, то можете воспользоваться специальным параметром компрессора. По умолчанию 1.

Код
jQuery("#responsive_headline").fitText(1.2); // более жёсткое изменение размера
jQuery("#responsive_headline").fitText(0.8); // более мягкое изменение размера

minFontSize & maxFontSize

Так же вы можете определить минимальный и максимальный размер текста, которые не будет превышен. Для этого воспользуйтесь параметрами: minFontSize и maxFontSize.

Код
jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })

CSS настройки

Убедитесь, что контейнеру для текста задана ширина!
У элементов с display: inline нет ширины. Используйте display: block или display: inline-block+ конкретную ширину (к примеру width: 100%).
При использовании position:absolute, так же нужно указать конкретное значение ширины.

  • FalleN

  • 2320

  • 1

  • 277

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!