Querendo deixar as fontes do seu site responsiva? FitText.js é um pequeno script feito em javascript, que permite o redimensionamento automático de textos (tipografia responsiva) quando a janela do navegador é redimensionada. Utilize esses script no seu layout fluído e tenha suas fontes responsivas.
Scripts
Script para usar com jQuery: jquery.fittext.js
Script somente com JS: fittext.js
<script src="jquery.fittext.js"></script><script> jQuery("#fittext").fitText();</script> |
<h1 id="fittext">Squeeze with FitText</h1> |
Alterando proporção da fonte
Por padrão fitText() deixa seu texto fluído 1/10 da largura do seu elemento. Podemos alterar essa proporção da seguinte forma:
$("#responsive_headline").fitText(1.2); $("#responsive_headline").fitText(0.8); |
Tamanho máximo e mínimo da fonte
Utilizando minFontSize e maxFontSize podemos definir um tamanho de fonte máximo e um tamanho de fonte mínimo.
jQuery("#responsive_headline") .fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' } ) |
Caso não utilize jQuery
Se você não utiliza jQuery no seu projeto e quer redimensionar suas fontes pode baixar um script que não precisa da biblioteca jQuery para funcionar. Para utilizar o script é basicamente a mesma coisa. Veja o exemplo:
<script type="text/javascript" src="fittext.js"></script><script> window.fitText( document.getElementById("responsive_headline") ); window.fitText( document.getElementById("responsive_headline"), 1.2 ); window.fitText( document.getElementById("responsive_headline"), 0.8 ); </script> |
Com uso do FitText.js fica fácil ter fontes responsivas.
Referências:
Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.