用于字体大小的c​​ss测量单位

Question

我已经在这个主题上搜索并阅读了SOF，我发现一些有趣的帖子，特别是建议使用pt作为字体大小的帖子，因为它既不与像素密度有关，也与分辨率无关，但我＆＃39;我还在搜索......

有什么方法可以在我的css文档中定义特定的字体大小，但是使用它与浏览器的默认字体大小成比例？像这样的东西：

x = default-font-size-of-browser％

单位使用=（x）/（我的目标尺寸％）em

然后将其用于设计中的每个填充，边距等，这在css中是不可能的，只要我知道！

我发现人们猜测的是＃34;通常，浏览器的默认值是16px字体大小＆＃34;，我不想猜测。

有人建议使用100％的html标签并使用rem定义所有其他尺寸：现在如果用户的字体大小与浏览器的默认值相同怎么办？然后，用户将看到所有已覆盖的网站，除了我的网站，不会覆盖它！当然，我可以将其视为用户的问题，并将其保留，但我不会采取这种方式。

请提出想法。

Answer 1

默认字体大小在每个浏览器中都相同，AFAIK。

字体大小的常见建议是：

body {
    font-size: 62.5%;
}

这会将基本字体大小设置为10px，但需要缩放。

然后我们假设您希望您的网站文本为16px，您可以：

p, ul, ol, table {
    font-size: 1.6em;
}

然后设置标题：

h1 {
   font-size: 2.5em;
}
h2 {
   font-size: 2em;
}

分别为25px和20px。

此方法意味着即使默认字体大小不符合您的预期，文本仍应相应缩放。

有关字体和字体大小的一些很酷的事情，请参阅此other post by me。适用于响应式布局

Answer 2

通常，您不应更改正文文本的字体大小。用户已将其浏览器配置为适合他的显示器和视力。如果您将字体大小强制为其他内容，则用户可能无法阅读文本。

使用 pt 作为单位来定义字体大小的选项应与打印机一起使用，但将其用于屏幕并不是一个好主意。它试图设置绝对大小（1pt = 1 / 72in）。即使桌面PC上的文本尺寸正确，在小型手机屏幕上也很可能不正确。 （从较短距离观看电话屏幕，因此字体需要更小。） 除此之外，pt大小取决于用户计算机上的dpi设置。许多用户的dpi设置错误（取决于所使用的显示器），因此字体大小不符合您的预期。

单位 px 不好，因为显示屏之间的像素大小不一，用户视力也是如此。但是，如果您希望文本与图像正确对齐，则非常有用，因为图像（以实际尺寸显示时）的尺寸为像素。

在大多数情况下，正文的大小应为100％（即不要更改）。对于其他元素，请使用 relative 大小调整（例如，％）。如果必须更改正文的字体大小，则其他元素将相对于该字体自动更改。以％表示的大小是相对于父元素上字体大小的大小。