CODEWITHSUNDEEP
jqueryhtmlcssfont-size
DaneSoul
DaneSoul

Reputation: 4511

Enlarge font-size in % for all texts with single rule?

I work with e-shop engine where lot of text-styles are defined in pixels directly (each element - own ruler), not in relative units. Now customer ask me to enlarge all the texts (texts, labels, titles and such) on 10%. I don't want to go throw ALL the styles and write individual new rules for each element.

So I am looking for some solution which can enlarge font-size for all elements with simple rules in CSS, or, if it's impossible JQuery

I tried to use in CSS rule * { font-size: 110% !important; } but it works recursively (ancestor -> child -> child - each level +10%) so some text elements which have several ancestors became realy huge.

Upvotes: 2

Views: 313

Answers (2)

Moe Assaad
Moe Assaad

Reputation: 337

So i used this code from Lukasz Dziedzia's answer to get all the text in the page.

Now we use $(this).css({ "font-size":($(this).css("font-size").replace('px','')*1.1 + "px"}); to change the font-size of each element.

Notice the use of replace('px','');, this is used here because $(this).css("font-size") returns the value with the letters "px" at the end. So after removing these 2 letters we can do the math : $(this).css("font-size").replace('px','')*1.1.

This is better than the first answer :)

Fiddle: http://jsfiddle.net/dQsnk/4/

Upvotes: 3

Milche Patern
Milche Patern

Reputation: 20442

<basefont>

Obsolete This feature is obsolete. Although it is still supported by browsers, its usage is discouraged in new projects. Try to avoid using it.

Summary

The HTML basefont element () establishes a default font size for a document. Font size then can be varied relative to the base font size using the element.

https://developer.mozilla.org/en/docs/Web/HTML/Element/basefont

  • HTML 3.2 supports the basefont element but only with the size attribute.
  • The strict HTML and XHTML specifications do not support this element.
  • Despite being part of transitional standards, some standards-focused browsers like Mozilla and Opera do not support this element.
  • This element can be imitated with a CSS rule on the element.
  • XHTML 1.0 requires a trailing slash for this element: .

Upvotes: 0

Related Questions