如何将<font size="10">转换为px?

35

我需要将<font size="10">转换为像素(px)。

仅供参考(不正确):<font size="10">相当于12px。

是否有任何公式或表格可以将<font size="10">转换为像素(px)?


4
技术上讲,大小在1到7范围之外的尺寸是无效的。 - cletus
2
尽管下面的答案已经丰富地指出了这一点,从技术上讲是不可能的,但对于我们这些需要进行一些转换的实际工作的人来说,我提供以下数据点:在Mac上的Chrome浏览器中,字体大小如下渲染:1=10像素,2=13像素,3=16像素,4=18像素,5=24像素,6=32像素,7=48像素(10超出了图表范围 - 最大值为7)。 - random_user_name
7个回答

44
<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>

7
你是从哪里获得 font-size 的值的?你如何确保它们在所有浏览器中都是正确的? - pts
@pts,我是通过查看浏览器的渲染来获取它们的。这取决于浏览器的实现,所以我不认为我需要确保所有浏览器的正确性。在我测试的所有浏览器中,最大缩放后看起来足够接近。 - Eugene Yokota
嗯,我会在不同的浏览器中测试这个 :) - marknt15
2
@pts:如果我的字号是8及以上,我该如何知道相应的em值呢?谢谢。 - marknt15

16
根据 W3C 的说明:

此属性设置字体大小。 可能的值:

  • 介于1和7之间的整数。 这将设置字体为某个固定大小,其呈现取决于用户代理。 并非所有用户代理都可以呈现所有七个大小。
  • 相对增加字体大小。 值“+1”表示比原来大一个尺寸。 值“-3”表示比原来小三个尺寸。 所有大小均属于1到7的范围。
因此,你要求的转换是不可能的。 浏览器不需要在特定的 size 属性中使用特定的字体大小。
另外请注意,W3不鼓励使用 font 元素,而是更推荐使用样式表

我明白了,谢谢Tormod。我正在使用eed3si9n的解决方案和这个转换器http://pxtoem.com/。现在它可以工作了。感谢所有回答我的人:D - marknt15

5

使用接受答案中的数据点,您可以使用多项式插值法得出一个公式。

WolframAlpha输入: 插值多项式{{1,.63},{2,.82}, {3,1}, {4,1.13}, {5,1.5}, {6, 2}, {7,3}}

公式: 0.00223611x^6 - 0.0530417x^5 + 0.496319x^4 - 2.30479x^3 + 5.51644x^2 - 6.16717x + 3.14

并在Groovy代码中使用:

import java.math.*
def convert = {x -> (0.00223611*x**6 - 0.053042*x**5 + 0.49632*x**4 - 2.30479*x**3 + 5.5164*x**2 - 6.167*x + 3.14).setScale(2, RoundingMode.HALF_UP) }
(1..7).each { i -> println(convert(i)) }

+1。很酷,但您是否考虑过您的输入并不是实际数据点,而只是四舍五入的数字? - Pacerier

4

如果没有定义字体大小并且容器的大小发生变化,那么将字体大小映射到 em 的方法就是准确的。

下面的方法对我来说效果最好,但是它不能识别 size=7 及以上的字体大小,这些字体都会渲染为 7。

font size=1 = font-size:x-small
font size=2 = font-size:small
font size=3 = font-size:medium
font size=4 = font-size:large
font size=5 = font-size:x-large
font size=6 = font-size:xx-large

enter image description here


字体大小=7 -> 字体大小:xxx-large 对我来说很好用(Firefox-Linux) - Greelings

1
通常情况下,您不能依赖固定像素大小的字体,用户可能会缩放屏幕,而默认值并不总是相同的(取决于屏幕的 DPI 设置等)。
也许可以看一下this(像素到点)和this link
但当然,您可以将字体大小设置为 px,这样您就知道字体实际上有多少像素。如果您确实需要固定布局,则此做法可能有所帮助,但这种做法会降低您网站的可访问性。

哦,自从那个像素到点的链接以来,事情已经发生了很大变化。现在我们谈论的是最大屏幕分辨率为1024x768...哈哈。 - ClarkeyBoy

0
这虽然很古老,但 <font size="10"> 大约等于 <p style= "font-size:55px">

抱歉,“10”大约是55像素。 - user2845437

-1

这个问题并不容易回答。它取决于所使用的字体和每英寸点数(ppi)。这里应该可以给出问题的概述。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接