Fit text to element by scaling the font-size of the text.
None
$ bower install typefit
Include the script
<script src="tm.typefit.js"></script>
Apply typefit
or tf
attribute to element, these will be rendered automatically.
<h1 typefit>Suspendisse pellentesque purus massa, sit.</h1>
<h1 tf>Suspendisse pellentesque purus massa, sit.</h1>
Or invoke with javascript using the typefit()
or tf()
functions.
<h1 id='my-id'>Suspendisse pellentesque purus massa, sit.</h1>
<script>
document.getElementById('my-id').tf();
// Options
document.getElementById('my-id').tf({
scale: 0.5
});
</script>
<h1 class='my-class'>Suspendisse pellentesque purus massa, sit.</h1>
<h2 class='my-class'>Suspendisse pellentesque purus massa, sit.</h2>
<h3 class='my-class'>Suspendisse pellentesque purus massa, sit.</h3>
<script>
document.querySelectorAll('.my-class').tf();
</script>
<h1 my-attribute>Suspendisse pellentesque purus massa, sit.</h1>
<script>
document.querySelector('[my-attribute]').tf();
</script>
To render registered elements
tm.typefit();
$('.my-class').get(0).tf();
$('.my-class')[0].tf();
If using a webfont you will need to include a loader script such as webfontloader and trigger tm.typefit()
after the webfont loaded event to render registered elements.
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Abril Fatface']
},
active: function() {
tm.typefit(); // Render typefit
}
});
</script>