Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS - Increase Page Font Size [duplicate]

Tags:

css

Possible Duplicate:
Allow users to change font size in a webpage

I have some webpages. I would like the user to click an image and have the font-sizes of all of the content on the page increase. Is this possible? If so, how?

I know that the browsers have options inside of them. Basically, I want a way to do that in the page itself.

like image 433
Villager Avatar asked Sep 06 '09 19:09

Villager


People also ask

How do I increase font size in CSS globally?

click(function() { $("body"). css("fontSize", "120%"); }); Done.

How do I automatically adjust font size in CSS?

Syntax: font-size-adjust: number|none|initial|inherit; Below are the examples that illustrates the use of font-size-adjust property.

Is the font size needs to be increased twice the normal found which of the following units can be used?

Set Font Size Using ems The em unit of measurement refers to the font size of a parent element. If you set a font's size to 2em , the font size will be twice that of the parent element.

How do I change font size relative to parent DIV?

The way I solved this problem was to use javascript to measure the container and then set the font size in px on that container. Once that baseline is set for the container then the relative font sizing of all the content will scale correctly using em or %.


3 Answers

Three things to achieve this:

Specify the overall font-size in the <body> tag. For example:

body { font-size: 100%; }

Don't use pixels to specify font-size anywhere else in the document.

p.somePara { font-size: 120%; }
p.anotherPara { font-size: 1.4em; }

Attach an event handler to this image, to adjust the font size accordingly. Using jQuery, for example:

$("#largerTextImage").click(function() {
  $("body").css("fontSize", "120%");
});

Done.

like image 139
Matt Howell Avatar answered Oct 17 '22 05:10

Matt Howell


If you increase the font size of a top-level element like <body>, then that [changed] size will be inherited by its child elements (assuming that other CSS rules for those element didn't override that size with an absolute value, which would also have messed up the user's changing font size in their browser).

This article (for example) says that it describes how to change CSS values programatically.

like image 34
ChrisW Avatar answered Oct 17 '22 04:10

ChrisW


I would say that you could switch css.

Put all your font-sizes in a separated CSS file. Then duplicate this file and change the font sizes. Then use a piece of js script to swich css files.

There are a lot of tutorials up there that explain all about it. Here's one.

like image 1
marcgg Avatar answered Oct 17 '22 04:10

marcgg