0

Suppose I have no choice but to use absolute font-size value, e.g. font-size: x-large;. According to many articles, the exact font size of such an element depends on user's preferences. My question (maybe silly) is: can I force some custom value instead of user's preferences as a base?

E.g. I have a given HTML document with absolute-size values, and I want to render it inside of an iframe (under same domain) with some configurable value as a font base. So that elements with font-size "x-large", "medium", "small", etc. change their real font size according to this base value. It might be useful e.g. just to demonstrate how these font values work. Can I achieve this at all? And how? Maybe there's a specific property in window object like "window.fontSizePreference" - who knows...

Alexey Grinko
  • 2,773
  • 22
  • 21

1 Answers1

1

If an absolute value has already been declared, and you want to simply replace it using a length value, you have a few options.

Possible Solutions

Override the CSS by being more specific. If your code is declaring the value using:

div.xlarge {
  font-size: x-large;
}

You could add another CSS selector to target that div, and CSS would use the more specific of the two values. For example, you could add body or the parent container:

body div.xlarge {
  font-size: 12px; /* This would overwrite the x-large value above */
}
div div.xlarge {
  font-size: 12px /* So would this */
}
.parentclass div.xlarge {
  font-size: 12px; /* And this */
}

For the sake of the example, I'm using a div with a parent div and a parent with the class name of .parentclass. You could also use span, p, li, ul, a, etc.

Note: Learn more about Specificity from MDN.

You could also add styling inline to the desired target. For example, if your HTML is: 
<div class="xlarge">My Text</div>

You could add inline styling like so and it would override the font-size CSS declared value:

<div class="xlarge" style="font-size: 12px;">My Text</div>

The last thing I'd recommend, is using the !important tag to override CSS values you couldn't otherwise target using the above methods. Assuming there is no other !important declarations, the last !important will force the CSS value. 
div.xlarge {
  font-size: 12px !important; /* Will override more specific CSS & Inline CSS */
  font-size: x-large; /* Would be ignored */

Note: Learn about using !important from CSS-Tricks.

IFrames

None of these solutions will work with just CSS if you are trying to edit an iframe, unless you have control of the iframe content. For editing iframe CSS, just do a quick search on Stack Overflow and there are a number of solutions.

Community
  • 1
  • 1
Matthew Beckman
  • 1,702
  • 2
  • 16
  • 28
  • Thank you for the verbose answer, but that's not it. First, I've noticed that _I have no choice but to use absolute font-size value, e.g. font-size: x-large_. I know about selectors specificity, "!important" rule and cross-domain iframes. If I could use font-size in pixels, this question wouldn't arise. So can I change one basic value to affect all such font sizes, or the only option is what you described - to replace each and every font-size statement? Maybe there's a specific property in window object like "window.fontSizePreference" - who knows... – Alexey Grinko Feb 12 '17 at 08:43
  • Second, you replaced font-sizes with static "12px", while "x-large" may lead to different real values depending user's preferences and webkit **font boosting** on mobile devices. So how do I get real font size (in pixels) in such case? – Alexey Grinko Feb 12 '17 at 08:43
  • @AlexeyGrinko So you are trying to change the user's default font that is set by the browser, and used to calculate the `absolute` value for fonts? If so, the simple answer is no, that's not possible. There is a good reason that browsers have default font sizes, and you won't be able to access that through the DOM. – Matthew Beckman Feb 14 '17 at 23:09