Html <font> tag has no effect when css values are set-CodePudding

I am writing an application using JavaScript and some CSS files.

For some reason when some css values are set the html tag has no effect e.g. color: red; and <font color="blue">.

My app can be bundled with any other project, so I can't change some CSS values ...

A small reproducible code;

<style>
    /* I cannot change these values... */
    *
    {
        color: blue;
        font-size: 10px;
    }
    
    /* I can change these values */
    *
    {
        color: unset;
        font-size: unset;
    }
</style>

<font color="red" size="20px">
    Lorem ipsum
</font>

In this case text should be red and font size should be set to 20px.

I cannot opt out of this html tag because it is added by the browser - these tags are added to editable div...

Any idea?

CodePudding user response：

As has been said, if at all possible, you should replace the font element with modern HTML.

However as a matter of technique, it is possible to achieve what you wanted to do. You can use the "revert-layer" value instead of "unset".

    /* I cannot change these values... */
    *
    {
        color: blue;
        font-size: 10px;
    }
    
    /* I can change these values */
    *
    {
        color: revert-layer;
        font-size: revert-layer;
    }

<font color="red" size="20px">
    Lorem ipsum
</font>

You should also note that size="20px" does not mean that the font-size will be 20px. The "px" is ignored, the "20" will be interpreted as a number, capped to "7" which is the maximum, and converted to a font-size of "xxx-large". This in turn equates to a scaling factor of 3em, so the font-size will be 16px * 3, = 48px.

CodePudding user response：

As suggested @mplungjan I am replacing <font> html tag to <span style="...">.

It works but I think this is pretty ugly solution.

CodePudding user response：

At your point i would just do

<html>
  <head>
    <style>
    .Font {
      font-family: Arial, Helvetica, sans-serif;
    }
    </style>
  </head>
  <body>
  <p >With Font</p>
  <p>Without Font</p>
  </body>
</html>

For more Font styles use this W3 Schools Link