How to force font-weight on all children, but respect the nested depth


Tags: html,css

Problem :

I'm displaying some HTML markup which was originally created in Flash. Flash has an attribute called "FACE" which applies a custom font to the tag. I'm processing the markup on the server side before it's sent to the browser, it converts FONT tags into spans and the FACE attribute into a class name, e.g. "Arial" or "ArialBold".

I want to style the text to match the custom fonts (so Arial can only show font-weight:normal, and ArialBold can only show font-weight: bold). The problem is my css isn't handling it how Flash would.

Flash might have this markup:

<font face="ArialBold">
  <font face="Arial"><span><b>Some text<b><span></font>
</font>

And it will display like this:

Some text

Here the Arial font is overriding the ArialBold font because it's nested deeper and the tag renders as normal text because the Arial font doesn't have bold characters included.

In the jsfiddle however, html/css will show the text as:

Some text

So, my question is, how do I fix the jsfiddle, so that the outputted text to display is:

Normal bold here

Hello World Good bye

Hello World Good bye

Example: jsfiddle

Thanks



Solution :

Just with this simple css:

.Arial *, .ArialBold * { font-weight: inherit; }
.Arial { font-weight: normal; }
.ArialBold { font-weight: bold; }

Demo: http://jsfiddle.net/kHFX8/15/


    CSS Howto..

    How to make this series of rules into a mixin?

    How can I apply a style to element if the user came to website using a link with an anchor/hash [closed]

    How would I go about setting a CSS gradient background in JavaScript?

    How to Override/Undo CSS Class Attributes for Twitter Bootstrap

    How to position text over an image in css

    How to keep a link underlined after it is clicked and then hovered over

    How does this pure CSS tab work?

    How to factor a color and boder-color into a single CSS style and apply it on other parts of the CSS styles

    Double Scroll Bars kept showing in Windows Broswers

    How do I set two values for IE's `filter` property?

    Selenium: how to define css if webpage has mutiple elements with same name

    How to style CSS for input box's width as a percentage when it has border and padding?

    How to do fallback for browser-specific css expressions

    How to have multiple borders on div using css

    How are media queries counted in IE's CSS selectors limit?

    CSS Position Help (horizontal sidebar showing up when animate content over)

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    How do I prevent a JQuery UI menu from floating?

    How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?

    Jquery, CSS - How to set element as first in list

    how to align element to bottom of page in print preview

    How can i get an image inside an li to disregard padding with css

    Understanding how VS parses CSS in .ascx docs

    how to save responsive menu open/close value?

    How to style LI to show quotes in a ticker

    I have a blinking box, how can I add a gradient to this or program it easier?

    How to set inline css width using model values in c#, mvc

    How can I change the path to the css file dynamically?

    How to create a underline with small break in middle with css?