如何使字体大小与屏幕分辨率和显示器大小无关？答案

【问题标题】：How to make font size independent of screen resolution and monitor size?如何使字体大小与屏幕分辨率和显示器大小无关？
【发布时间】：2013-04-21 03:41:12
【问题描述】：

我正在开发一个应用程序，我想在其中制作与屏幕分辨率和屏幕尺寸无关的字体大小。所有分辨率和所有屏幕尺寸的字体大小都应该相同。用javascript和css怎么做？

我认为每点像素与硬件相关，所以我不确定 javascript 和 css 是否可以访问它。

我尝试了许多替代方案，但找不到确切的解决方案。

【问题讨论】：

如果用户将计算机连接到投影仪会发生什么？
我可以理解您的问题的性质，但对于视力受损的人来说，这可能是一条危险的电线。
@rimunro，我没有这个要求，在我的应用程序中，我只需要为电脑显示器维护字体大小。

标签： javascript html css

【解决方案1】：

您可以使用基于 1/72 英寸的点 (pt)。这是一个传统上来自印刷的单位。现在，这取决于设备是否配置正确，这个大小在监视器之间是否相同。通常不是，但有些设备知道它们的物理屏幕尺寸。您还可以使用英寸 in、厘米 cm 和毫米 mm。

将此大小与ems 结合使用，它们是相对大小。这样，整个站点就可以根据需要进行扩展和缩减。

body {
    font-size: 12pt;
}
h1 {
    font-size: 2em;
}
p {
    font-size: 1.1em;
}

【讨论】：

【解决方案2】：

没有好的、通用的解决方案。在我看来，你应该认为这是不可能的。 This article 最近发布，并提出了该问题的（长期）解决方案。这是长期的，因为它需要多个参与者（硬件和软件制造商）来解决。

引用作者的话：

我们可以将机器人送到火星，这很荒谬，但实际上仍然不可能在网页上渲染一个字形并自信地说：“如果你用尺子在屏幕上测量这个字形，它的宽度正好是 10 毫米。”

【讨论】：

呵呵，是的，因为在 50x50px 的屏幕上，16px 的字体大小没有意义，因此设置了相对 ppi 或 dpi，以便您可以阅读信息而不是正确的样式。

【解决方案3】：

老式的points 应该可以工作。

例子：

<style>
p
{
    font:15pt;
}
</style>

【讨论】：

pt 单元与任何 CSS 单元一样，可能取决于屏幕分辨率，请参阅 w3.org/TR/css3-values/#absolute-lengths
值得一提的是，它之所以有效是因为点与英寸相关，而不是像素。使用.2in 也可以。综上所述，在 CSS 中，点和英寸取决于分辨率，因此它们永远不会是独立的。

【解决方案4】：

您不能这样做，因为您无法确定用户监视器的真实大小，除非您可以控制正在使用的计算机。

用户可以同时连接两台显示器，并进行设置，使屏幕的相同元素在每台显示器上显示为不同的尺寸。

【讨论】：

它不是通用的，但是某些设备的配置方式使其经常可以正常工作。移动设备尤其如此。
通过媒体查询可以知道客户端的显示尺寸。
@Nelson，媒体查询与此无关。如果客户端知道它的尺寸，那么物理单元将适用于所有 CSS、媒体查询或不适用。许多客户不知道他们的物理显示尺寸，但很多人知道。
@rimunro ，然后我可以制作用户可以选择屏幕尺寸的应用程序。例如，如果用户有屏幕 24 英寸宽屏 LCD，那么如何做到与分辨率无关？

【解决方案5】：

你可以使用厘米和毫米：

<span style="font-size: 2cm;">i am big</span>
<span style="font-size: 2mm;">i am tiny</span>

【讨论】：

我希望这确实有效...在一些显示器上尝试一下，然后测量结果。
@bfavaretto，但确实如此！在一些移动设备上尝试，然后测量结果。它不能普遍适用……甚至不能接近……但在许多情况下它确实有效。
@Brad 我刚刚在我的 iMac 和 iPhone 上尝试了this，结果在这两种情况下都关闭了（关闭了约 25%）。也许它只适用于字体，而不适用于一般大小？

【解决方案6】：

html {font-size: 14px /* in example */}

这会让html的每个兄弟元素都给出一个相对大小，这意味着

body { font-size: 100% } /* is 14px now */

还有

div { font-size: 1em } /* should be 14px also */

也可以使用 javscript 更改 html 字体大小，并且所有相对大小都应按预期工作。使用 jQuery，您可以访问正文的字体大小并将其设置为从屏幕大小计算的某个大小。对于不同设备中的任何类型的应用程序，即使工作也是@media () { your css here } 规则。

var fontsize=14+'px';
jQuery('body').css('font-size',fontsize);

【讨论】：

【解决方案7】：

正如其他人所说，您不能使字体大小完全独立于屏幕分辨率。您可以做的是使用媒体查询来定位不同的屏幕尺寸并相应地调整字体大小。

body { font-size: 16px; }
@media screen and (min-width: 600px) {
    body { font-size: 112.5%; }
}
@media screen and (min-width: 800px) {
    body { font-size: 125%; }
}
@media screen and (min-width: 1000px) {
    body { font-size: 137.5%; }
}
@media screen and (min-width: 1200px) {
    body { font-size: 150%; }
}

这些只是示例值 - 您必须尝试各种尺寸的应用，然后看看哪种看起来最好。 Trent Walton's 网站就是一个很好的例子——调整浏览器窗口的大小，看看文本大小会发生什么变化。

如果您使用 em 或 rem 单位调整所有字体大小，则只需调整正文字体大小，其余值将按比例缩放。

【讨论】：