|
Actually, almost all browsers have a feature to control the characters on the web pages you visit, by pressing the Ctrl key
together with + (to zoom in) or - (to zoom out). But there is one other
way of adding such a function "dynamic font size" on your site using
javascript.
Here is a script that can be used to facilitate the visitors to
control the font size of text on each page of your website/blog. This
will be very useful for readers who struggle with small letters, and
allow the person to enlarge the font size of your writing, so they are
easier to read.
<script type="text/javascript">
var min=8;
var max=18;
function zoominLetter() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}
function zoomoutLetter() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}
}
</script>
The script above will change the font size of text within the
paragraph (tag <p>). If you want to use another tag, you can
change the getElementsByTagName('p');
Of course, this script only works on the page with pixel sized fonts (letter-sized pixels (px)) compared with relative sized fonts
(the relative size of the letters like: "em" and "%"). In addition, if
the script does not find the font size of a paragraph, it will use the
standard size, which is 12px.
How To Use :
Enter the above script on your blog page (either by typing in the tag <head>
or by using .js file external and import). To call the function
zoominLetter and zoomoutLetter you can use the following HTML code:
<a href="javascript:zoominLetter();">A</a>
<a href="javascript:zoomoutLetter();">a</a>
tips: You can change the text A | a with other signs, or replace it with a picture by using tags <img>.
|