Question

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

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

到css？例如

.example{
 font-size: ?px;
}

换句话说，size属性指的是多少像素？

Answer 1

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

请参阅，HTML尺寸不是实际尺寸，而是某种随机尺寸。 SIZE属性允许您将字体设置为1到7之间的抽象大小。与这些值对应的确切类型大小留给浏览器。例如，你不能确定SIZE = 4会给你12点字体;你只知道SIZE = 4将大于SIZE = 3。

因此，您在一个浏览器中看到12px的内容在另一个浏览器中将是13px或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

Answer 2

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

一个合理的假设是'2'对应'较小'，'4'对应'较大'等。

Answer 3

您无法将<font>转换为字体大小（以像素为单位），因为字体标记的字体大小会因基本字体大小而异。
它可以在em中完成，如本问题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

Answer 4

HTML

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

CSS

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

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

将字体标记（大小属性）转换为css

4 个答案: