9

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

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

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

4

7 回答 7

4

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

将此尺寸与ems相对尺寸结合使用。这样，整个站点可以根据需要向上和向下扩展。

body {
    font-size: 12pt;
}
h1 {
    font-size: 2em;
}
p {
    font-size: 1.1em;
}
于 2013-04-26T21:28:39.020 回答
2

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

引用作者的话：

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

于 2013-04-26T21:37:19.263 回答
1

老式的点应该工作。

例子：

<style>
p
{
    font:15pt;
}
</style>
于 2013-04-26T21:21:06.557 回答
1

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

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

于 2013-04-26T21:22:29.240 回答
0 
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);
于 2013-04-26T21:21:52.490 回答
0

您可以使用厘米和毫米：

<span style="font-size: 2cm;">i am big</span>
<span style="font-size: 2mm;">i am tiny</span>
于 2013-04-26T21:30:29.460 回答
0

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

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 的网站就是一个很好的例子——调整浏览器窗口的大小，看看文本大小会发生什么变化。

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

于 2013-10-28T23:29:59.090 回答