html – 将字体标记(大小属性)转换为css

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

.example{
 font-size: ?px;
}

这不是一个简单的问题,真正的答案是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