Increase & Decrease Font Size To Improve Accessibility - fontsize
File Size: | 5.25 KB |
---|---|
Views Total: | 5203 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

fontsize.js is a tiny text resize plugin that allows the visitor to manually increase or decrease the font size of given elements within the document for better text accessibility.
More Features:
- Custom increase/decrease buttons.
- Custom step size.
- Allows to set min/max font sizes.
- Auto ignores 'SVG', 'IMG', 'USE', 'BR', 'VIDEO', 'AUDIO', 'STYLE', 'SCRIPT' elements.
How to use it:
1. Put text increase/decrease buttons on the webpage.
<button class="zoomin">Bigger</button> <button class="zoomout">Smaller</button>
2. Download and load the JavaScript fontsize.js
at the end of the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/fontsize.js"></script>
3. Call the function on the target element where you want to adjust the font size of your text.
<article id="example"> Your Text Here </article>
$('#example').FontSize();
4. Determine the min/max font sizes (the number of times to zoom in and out). Defaults to 2.
$('#example').FontSize({ increaseTimes: 5, reduceTimes: 5 });
5. Set the step size for text resizing. Defaults to 2.
$('#example').FontSize({ step: 3 });
6. Override the default selectors of increase/decrease buttons.
$('#example').FontSize({ increaseBtn: '.zoomin', reduceBtn: '.zoomout' });
This awesome jQuery plugin is developed by little-sean. For more Advanced Usages, please check the demo page or visit the official website.