Convert font tag (attribute size) to css

Question

How to convert the size attribute of the font tag:

<font size="3">Example</font> 

in css? eg

 .example{ font-size: ?px; } 

In other words, how many pixels does the size attribute refer to?

Answer 1

This is a tough question, and the real answer is IT DEPENDS .

See, HTML sizes are not a real size, but a random size. The SIZE attribute allows you to set the font size in the range from 1 to 7. The exact font size corresponding to each of these values ​​is left in your browser. You cannot be sure, for example, that SIZE = 4 will give you a 12 point font; you only know that SIZE = 4 will be greater than SIZE = 3.

So what you see in 12px in one browser will be 13px or 14 px in another browser. There is a very interesting test made by the user SO Eugene Yokota , where you can see an approximate translation of fonts translated into em:

 <font size=1>- font size 1</font><br> <span style="font-size:0.63em">- font size: 0.63em</span><br> <font size=2>- font size 2</font><br> <span style="font-size: 0.82em">- font size: 0.82em</span><br> <font size=3>- font size 3</font><br> <span style="font-size: 1.0em">- font size: 1.0em</span><br> <font size=4>- font size 4</font><br> <span style="font-size: 1.13em">- font size: 1.13em</span><br> <font size=5>- font size 5</font><br> <span style="font-size: 1.5em">- font size: 1.5em</span><br> <font size=6>- font size 6</font><br> <span style="font-size: 2em">- font size: 2em</span><br> <font size=7>- font size 7</font><br> <span style="font-size: 3em">- font size: 3em</span><br> 

But this is still somehow subjective and, of course, does not answer a fixed (pixel) question. However, you can use the above table to convert to pixels as a guide:

 Font=1: 10px Font=2: 13px Font=3: 16px Font=4: 18px Font=5: 24px Font=6: 32px Font=7: 48px 

Now the thing is, when you have pixels in a row, you really don't need to worry, so as long as you define something like "font-size:12px" , all browsers will (should) display a font with a height of 12px

If you're interested in the differences between rendering font tags between browsers, yu might take a look at this link for possible examples.

Answer 2

"3" is the "default", so the closest equivalent is to omit any font-size specification or use font-size: 1 rem .

A reasonable assumption is that “2” corresponds to “less,” “4” to “more,” etc.

Answer 3

You cannot convert <font> to font size in pixels, since the font size of the font tag depends on the base font size.
This can be done in em, as indicated in this SO question, How to convert <font size = "10" →> to px? .
The following is a diagram obtained from @EugeneYokota:

- font size 1
- font size: 0.63em

- font size 2
- font size: 0.82em

- font size 3
- font size: 1.0em

- font size 4
- font size: 1.13em

- font size 5
- font size: 1.5em

- font size 6
- font size: 2em

- font size 7
- font size: 3em

This font size converter can be useful Font labels, font sizes are relative, that is, they vary depending on the size of the base font.
This article explains this in more detail.

Answer 4

HTML

 <p class="example">Paragraph Text</p> 

CSS

 p.example{ font-size: 12px; } 

With that said, you should read more scalable CSS so you don't focus on a single paragraph.