将字体标签（大小属性）转换为css [重复]答案

【问题标题】：Convert font tag (size attribute) to css [duplicate]将字体标签（大小属性）转换为css [重复]
【发布时间】：2014-11-11 21:14:14
【问题描述】：

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

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

到CSS？例如

.example{
 font-size: ?px;
}

也就是说size属性指的是多少像素？

【问题讨论】：

标签： html css

【解决方案1】：

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

请看，HTML 大小不是真实大小，而是某种随机大小。 SIZE 属性允许您将字体设置为从 1 到 7 的抽象大小。与这些值中的每一个相对应的确切类型大小留给您的浏览器。例如，你不能确定 SIZE=4 会给你一个 12 磅的字体；你只知道 SIZE=4 会比 SIZE=3 大。

因此，您在一个浏览器中看到的 12 像素将是另一个浏览器中的 13 或 14 像素。有一个很interesting test made by SO user Eugene Yokota 可以看到翻译成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>

但这在某种程度上仍然是主观的，当然不能回答固定（像素）问题。但是，您可以使用上表作为指导转换为像素：

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 的字体

如果你对浏览器之间字体大小标签渲染的差异感兴趣，你可以看看这个link with may examples

【讨论】：

比我的要好得多！ ;) +1
啊，直到你提到我才看到你的，我打算投票但我不能，因为它已经被删除了。这也很好，可惜你删除了它，因为我看到它有一些关于一个看起来很肤浅但仍然没有明确答案的问题的附加信息

【解决方案2】：

“3”是“默认”，因此最接近的等效项是省略任何font-size 规范，或使用font-size: 1 rem。

一个合理的假设是'2'对应'smaller'，'4'对应'larger'，等等。

【讨论】：

【解决方案3】：

您无法将<font> 转换为以像素为单位的字体大小，因为字体标签的字体大小在基本字体大小之间变化。
它可以在 em 中完成，正如这个 SO 问题中所发布的那样，How to convert <font size="10"> to px?。
下面的图表来自@EugeneYokota 的回答：

- 字体大小 1
- 字体大小：0.63em

- 字体大小 2
- 字体大小：0.82em

- 字体大小 3
- 字体大小：1.0em

- 字体大小 4
- 字体大小：1.13em

- 字体大小 5
- 字体大小：1.5em

- 字体大小 6
- 字体大小：2em

- 字体大小 7
- 字体大小：3em

This font-size converter might be helpful 字体标签、字体大小是相对的，这意味着它们会根据基本字体大小而变化。
This article explains it in more detail

【讨论】：

【解决方案4】：

HTML

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

CSS

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

话虽如此，您应该阅读更具可扩展性的 CSS，这样您就不会针对单个段落。

【讨论】：

为什么你认为作为（过时的）font 标签的size 属性的值的“3”必然等于12px，这就是OP问？
仅提供一个示例，供 OP 使用。