将字体标记（大小属性）转换为css [英] Convert font tag (size attribute) to css

问题描述

如何转换字体标签的size属性：

How would I convert the size attribute of the font tag:

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

到css？例如

.example{
 font-size: ?px;
}

换句话说，size属性引用多少像素？ p>

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

推荐答案

这不是一个简单的问题，真正的答案是 IT DEPENDS 。

This isn't an easy question, and the real answer is IT DEPENDS.

看到，HTML尺寸不是真正的尺寸，而是一种随机尺寸。 SIZE属性允许您将字体设置为从1到7的抽象大小。与每个值对应的确切类型大小将留给您的浏览器。你不能确定，例如，SIZE = 4会给你一个12点字体;你只知道SIZE = 4会大于SIZE = 3。

See, the HTML sizes aren't a real size, but a somehow random size. The SIZE attribute allows you to set your font to an abstract size ranging from 1 to 7. The exact type size corresponding to each of these values is left to your browser. You can't be sure, for example, that SIZE=4 will give you a 12 point typeface; you know only that SIZE=4 will be bigger than SIZE=3.

因此，在另一个浏览器中，在一个浏览器中看到的12px将是13px或14px。有一个非常由SO用户Eugene Yokota 做的有趣测试，其中您可以看到翻译为em的字体大致呈现效果：

Thus, what you see at 12px in one browser will be 13px or 14 px in another browser. There's a very interesting test made by SO user Eugene Yokota where you can see the approximate rendering of fonts translated to 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 doesn't answer the fixed (pixels) question. However, you can use the table above to translate 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

现在，事情是，一旦你有你的像素在线，你真的不需要担心，因此只要你定义了font-size：12px，所有浏览器都会（应该）渲染一个高度为12px的字体

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

如果您对浏览器之间的字体大小标记呈现之间的差异感兴趣，您可以查看此 link with may examples

If you're interested in differences between Font Size tag rendering between browsers, yu can take a look to this link with may examples

这篇关于将字体标记（大小属性）转换为css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！