FitText

FitText

~lt~coment~gt~Плагин FixText привязывает размер шрифта к размерам содержащего его элемента. Это может быть очень полезно при создании адаптивного дизайна. В данном примере, чтобы лучше понять о чем идет речь, вы можете изменять размер блока с текстом с помощью ручки в нижнем правом углу.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/fitText/jquery.fittext.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'~gt~
  ~lt~style~gt~
    body{padding:50px; font:bold 9pt 'Boogaloo', serif;}
    .box{background-color:#eee; text-align:center}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class='box'~gt~Fit Text~lt~/div~gt~
  ~lt~script~gt~
    $('.box').resizable().fitText(0.35);
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Подключение и использование

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а так же js-файл плагина: (его можно скачать на github):

~lt~script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script type="text/javascript" src="jquery.fittext.js"~gt~~lt~/script~gt~

После этого, можно применять плагин к элементам, в которых необходимо привязать размер текста к размеру этих элементов:

$('selector').fitText();

Плагин нужно применять к элементам c display равным block или inline-block. Кроме того, применять плагин следует только к элементам, которые уже добавлены на страницу. Например, такой вариант, работать не будет:

$('~lt~div~gt~text~lt~/div~gt~').fitText();

FitText игнорирует текущий font-size и по умолчанию устанавливает его в 1/10 ширины элемента с текстом. Если вам нужно изменить это соотношение, то следует задать для него необходимый коэффициент в первом параметре метода .fitText(). Если коэффициент будет больше 1, то шрифт будет меньше, чем по умолчанию, если от 0 до 1 — больше. В примере выше указанный коэффициент 0.35. Так или иначе, для каждой ситуации придется подбирать собственный коэффициент.

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

$('selector').fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

Информация

Размер плагина ~2k (несжатый js-файл)

Официальная страница

Кроссбраузерный (работает во всех современных браузерах)