the CSS command to increase the current font size by one
Moderator: General Moderators
- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
the CSS command to increase the current font size by one
Can anyone tell me how to increase/decrease the font size using CSS by x points/pixels/em. How I wanted it to work is, if current size is 10px, if I put something like +1 , it should make it as 11px, if I put as -2, it should make it as 8 px...something similar to what I have told.
Something like this:
Default font-size for many browers is around 16px. So if you set the body size on 62.5%, that will set the font-size to around 10px. Then if you work with % after that the mathematics are easy (120% = 12px etc)
Code: Select all
body {
font: 11px/1.5em "Lucida Grande","lucida sans unicode",verdana,sans-serif;
}
p {
font-size:1.1em; // can be font-size:110%; as well
}
#sidebar p {
font-size:.9em;
}
h2 {
font-size:2em;
}
- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
I want something like what browser does, if you increase the text size in IE or Mozilla, it increases current font size of every section in the HTML page by one. Similarly I want a CSS code that finds the current font size and increases by one when I put something like +1.
anyway, thanks for your reply
anyway, thanks for your reply
- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
matthijs, thanks for your continued interest in the subject.
let me give some good example..
1.
let's say we have a css setting for body
body{
font-size:0.8em;
}
we keep on writing paragraphs on divs and at some point you can want to make font bolder, you do not really want to know what the size we are using, you just want to increase based on the context, like +1 for a heading.
and you have another situation where you want to make it bolder, like +2 for it and in some case, may be at the top of the page, you want to make a piece of text to be boldest like +3 points above normal font size.
2. the second problem would be where i want to simulate the browser enlarge/reduce the font-size of the entire page...like
a paragraph with .8em
a heading with 1.0em
a subheading with 0.9em
so when you click enlarge, then it should be
a paragraph with 0.9em
a heading with 1.1 em
a subheading with 1.0em
let me give some good example..
1.
let's say we have a css setting for body
body{
font-size:0.8em;
}
we keep on writing paragraphs on divs and at some point you can want to make font bolder, you do not really want to know what the size we are using, you just want to increase based on the context, like +1 for a heading.
and you have another situation where you want to make it bolder, like +2 for it and in some case, may be at the top of the page, you want to make a piece of text to be boldest like +3 points above normal font size.
2. the second problem would be where i want to simulate the browser enlarge/reduce the font-size of the entire page...like
a paragraph with .8em
a heading with 1.0em
a subheading with 0.9em
so when you click enlarge, then it should be
a paragraph with 0.9em
a heading with 1.1 em
a subheading with 1.0em