如何将字体大小更改为 em

Posted 2023-03-06

【中文标题】如何将字体大小更改为 em

【英文标题】：How to change font size to em

【发布时间】：2014-07-18 20:05:00

【问题描述】：

我的问题是如何设置我的默认文本大小，以便我可以将 px 的文本大小转换为 em 的？

在This 线程上，有人解释说 em 是一个比例尺，因此我的文本在移动设备上将是合适的大小，但是如何设置我的默认文本大小以便我可以设置我的 em 大小？

*编辑：稍微改一下，我如何设置使用 em 缩放的测量值？

【问题讨论】：

嗯……你的意思是这样吗？ body font-size: 12em;

正文默认大小可以设置

所以要设置字体大小，我只需在正文中将其更改为 px，其余为 em？

“将我的文本大小从 px 转换为 em”是什么意思？它们是两个不同的单位，其中一个是物理的（虽然不是真正固定的），另一个是相对的。所以这就像问如何将某物从公斤转换为百分比。

【参考方案1】：

您可以在正文元素上设置文档的默认文本大小。

body 
    font-size: 100%;

这会将基本字体大小设置为 100% - 在大多数浏览器中约为 16 像素。然后，您可以分配与此相关的字体大小。

例如：

h1 
    font-size: 2em; // This will render at 200% of the base font so around 32px


small 
    font-size: .5em // This will render at 50% of the base font size

请记住，尽管这些与它们的父元素相关，因此将 <small> 元素放在 <h1> 中意味着小元素将呈现其父元素的 50% - 在这种情况下返回到基础元素字体大小...令人困惑对吗？

为了解决这个问题，我会使用rem 而不是 em（使用像素作为字体也没有错）。 rem 单位始终引用父元素 - 因此.5rem 将始终是基本字体大小的 50%，无论父元素大小如何。

希望对您有所帮助。

【讨论】：

唯一需要注意的是rem（root em）在IE8上不可用。可能没有任何区别，但值得牢记:)

好吧，谢谢你提供关于 rem 的信息，肯定也会用这个。我会投票，但在我有更多声誉之前我不能投票：|

你是对的 PeteAUK，总是值得考虑（遗憾）。谢谢@JoeFenny - 您已经将另一个答案标记为正确，因此无法标记两个。 PeteAUK 的回答很好，所以我们都很好 - 我们不是为了要点：）很高兴它有所帮助。

我已经设法格式化页面，使文本与原来相同，但带有 em 测量值，但是当我在上传的开发网站上对其进行测试时，移动设备上的文本仍然很大:/ 有什么进一步的想法吗？该网站是 dev.kerrigans.org 如果您在手机上继续，您会看到文字太大。

嘿乔 - 不要采取这种错误的方式，但该网站有很多错误能够有效地调试。也就是说，我现在正在寻找移动设备，您要克服哪些问题？除了“Property Sales and Lettings”下降到两行之外，它看起来和我预期的一样好。 @JoeFenny

【参考方案2】：

将你的身体设置为百分比，其余的设置为 ems：

body  font-size:62.5%; // this means 10 px

div  font-size:2em // this will be 20px
p  font-size:1em // this will be 10px

等等……

【参考方案3】：

通常我将主体尺寸设置为固定像素，然后将其余部分设置为 em：

body 
    font-size: 14px;

p 
    font-size: 1em;

h1 
    font-size: 2em;

h2 
    font-size: 1.8em;

这给出了 14px 的 p 大小，h1 为 28px，h2 为 25px。

同样，如果您想使用浏览器使用的任何尺寸，只需使用：

body 
    font-size: 1em;

【讨论】：

哦，一般浏览器使用 16px 作为标准字体大小:)

太棒了，这似乎工作到目前为止，感谢您的帮助。

【参考方案4】：

用 Em 设置字体大小

h1 font-size:2.5em; // 40px/16=2.5em 

h2 font-size:1.875em; // 30px/16=1.875em 

p font-size:0.875em; // 14px/16=0.875em