In regards to changing text size from the website by CSS

Question

Hello there,

Currently, I am working on a website where I am providing the facility to change the theme of the website as well as to increase and decrease the text size. The problem now I am having is that I want the font size to be changed whether the default or another theme is selected. That means, the CSS will be of such for the font increase and decrease that it effects only the font not the colour scheme.

Can anyone help me here that how to achieve this? What shall I do in...???

Thank you.

Answer 1

if the text size in the css files you're linking in is set in relative values (eg. font-size: 1.0em;, font-size: 0.8em, etc.) you can resize the text for the entire page by setting the css font size for the body tag. You can do this in javascript like this:

document.body.style.fontSize = '1.2em';  // to make it larger

document.body.style.fontSize = '0.8em';  // to make it smaller

If you css files have absolute values (font-size: 11pt; etc) I'm not sure if this will work.

Best of luck!

Answer 2

Are you using any particular CMS or coding your own?

This can be difficult because with most of the Content Management Systems that I am familiar with the CSS files are associated with each theme separately.

Most web browsers have the ability for the user to change the font size as an accessibility feature. Is that what you are trying to emulate?