0

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?

montjet
  • 525
  • 1
  • 4
  • 13
  • 12
    `` has been depreciated, there's no guarantee it will work consistently in each browser (or at all) [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font) – DBS Sep 08 '22 at 08:50
  • 1
    And to add to @DBS ' comment, I suggest you take a look at how specificity works in CSS: [Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) – albjerto Sep 08 '22 at 08:53
  • 2
    Can you use JavaScript to replace the tag and its class name? – mplungjan Sep 08 '22 at 08:54
  • 1
    If you want to do this inline with minimal changes, use a `` like so: ``. If you have access to the CSS directly, then you can apply with something like `` and then in the CSS `.name-of-class { color: red; font-size: 20px }`. If the `` tag is built in, then it will look like `text`. It's not going to be pretty HTML, but it will work. – misterManSam Sep 08 '22 at 09:24
  • Please add a reproducer. @DBS It's spelled "deprecated". – connexo Sep 08 '22 at 15:54
  • 1
    @connexo Yep, unfortunately the 5 min edit window on comments makes some typos live forever. – DBS Sep 08 '22 at 16:00

3 Answers3

3

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.

Alohci
  • 78,296
  • 16
  • 112
  • 156
0

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

It works but I think this is pretty ugly solution.

montjet
  • 525
  • 1
  • 4
  • 13
  • 2
    You may feel it’s ugly, but it’s far better - in my opinion - than having to add html elements in order to style the page, and far more maintainable. It’s easier once you start using semantic html, using elements that describe the purpose/intent of the text they wrap instead of nesting spans arbitrarily to change colour or font size. – David Thomas Sep 08 '22 at 10:03
  • 2
    Even better would be `` and then add a class to your CSS to style this tag. Namie it somthing meaningful though. – phuzi Sep 08 '22 at 12:49
0

At your point i would just do

<html>
  <head>
    <style>
    .Font {
      font-family: Arial, Helvetica, sans-serif;
    }
    </style>
  </head>
  <body>
  <p class="Font">With Font</p>
  <p>Without Font</p>
  </body>
</html>
For more Font styles use this W3 Schools Link
Lord Nevi
  • 1
  • 2