Плагин 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 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^