em 的高度是多少?

发布于 2024-09-13 02:51:43 字数 136 浏览 4 评论 0原文

我仍然不清楚 em 中的大小是什么意思?
我在 CSS 中使用过 px、pt。
0.8、1.0 和 1.2 em 是什么意思?
我在 CSS 中看到了高度,如下所示: 高度:0.8em;或高度:1.2em;
它是如何计算的?

I am still not clear what does size in em mean?
I have worked px, pt in CSS.
What would 0.8, 1.0 and 1.2 em mean?
I have seen height's in CSS like:
height: 0.8em; or height: 1.2em;
How is it calculated?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

乞讨 2024-09-20 02:51:43

多年来,“em”的含义已经发生了变化。并非所有字体都包含字母“M”(例如中文),但所有字体都有高度。因此,该术语的意思是字体的高度,而不是字母“M”的宽度。

让我们看一个简单的例子,我们使用 em 单位来设置字体大小:

<html>
  <style>
    h1 { font-size: 2em }
  </style>
  <body>
    <h1>Movies</h1>
  </body>
</html>

当用于指定字体大小时,
em单位是指字体大小
父元素。所以,在之前的
例如,h1 的字体大小
元素设置为字体的两倍
body 元素的大小。去寻找什么
h1 元素的字体大小将
是,我们需要知道字体大小
正文。因为这没有在中指定
样式表,浏览器必须找到
来自其他地方——一个好地方
要看的是用户的喜好。
所以,如果用户设置普通字体
size 为 10 磅,h1 的大小
要素为20分。这使得
文件标题相对突出
到周围的文字。所以:
始终使用 ems 设置字体大小!

更多信息

The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example, Chinese), but all fonts have a height. The term has therefore come to mean the height of the font – not the width of the letter "M."

Let's look at a simple example where we use the em unit to set font sizes:

<html>
  <style>
    h1 { font-size: 2em }
  </style>
  <body>
    <h1>Movies</h1>
  </body>
</html>

When used to specify font sizes, the
em unit refers to the font size of the
parent element. So, in the previous
example, the font size of the h1
element is set to be twice the font
size of the body element. To find what
the font size of the h1 element will
be, we need to know the font size of
body. Because this isn't specified in
the style sheet, the browser must find
it from somewhere else – a good place
to look is in the user's preferences.
So, if the user sets the normal font
size to 10 points, the size of the h1
element is 20 points. This makes
document headlines stand out relative
to the surrounding text. Therefore:
Always use ems to set font sizes!

More Info

静谧 2024-09-20 02:51:43

1em等于当前字体大小

2em 表示当前字体大小的 2 倍。

例如,如果一个元素以 12 pt 的字体显示,那么“2em”就是 24 pt。 “em”是 CSS 中非常有用的单位,因为它可以自动适应读者使用的字体,

以下是其他 CSS 单位的链接:

http://www.w3schools.com/cssref/css_units.asp

1em is equal to the current font size.

2em means 2 times the size of the current font.

E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

Here's a link to other CSS units:

http://www.w3schools.com/cssref/css_units.asp

一萌ing 2024-09-20 02:51:43

1em 等于当前字体大小。 2em 表示当前字体大小的 2 倍。例如,如果一个元素以 12 pt 的字体显示,那么“2em”就是 24 pt。 “em”是 CSS 中非常有用的单位,因为它可以自动适应读者使用的字体。

更多信息

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.

more here

芸娘子的小脾气 2024-09-20 02:51:43

保罗是正确的,但它是“M”而不是“m”。然而,这是一个源自排版/印刷的深奥定义,在这种情况下没有多大用处。就对您有用而言,它是字体大小的百分比。

Paul is correct, however its "M" not "m". However this is an esoteric definition derived from typesetting/printing and isnt of much use in this case. In terms of whats going to be useful to you you its a percentage of font size.

烟织青萝梦 2024-09-20 02:51:43

em 是字母“m”的宽度(以您当前的字体和大小)。

An em is the width of the letter "m" (in your current font and size).

诗笺 2024-09-20 02:51:43

Em 是字符的大小。它会根据字体大小而变化。如果字体大小为 24,则 2Em 将等于容纳两个字体大小 24 的字符所需的空间。

引用自 wiki。

em 是一种测量单位
排版领域。本单元定义
字母宽度的比例和
相对于点大小的高度
当前字体。

仅供参考:
En是Em的一半。 0.5Em

Em is the size of a character. It will vary depending upon the font size. If the font size is 24 then 2Em will be equal to the space it should take to hold two characters of the font size 24.

As quoted from wiki.

An em is a unit of measurement in the
field of typography. This unit defines
the proportion of the letter width and
height with respect to the point size
of the current font.

FYI:
En is half of Em. 0.5Em

少女的英雄梦 2024-09-20 02:51:43

em 表示“临时单位”,它相对于其父元素的当前字体大小。例如,

标题中的文本默认为 2em。这是因为

从其父元素(文档的 )继承其文本大小。如果我将 font-size 设置为 16px(font-size: 16px;)。我的

为 2em 将继承 32px 的大小,因为 2em 是 1em 大小的两倍。在本例中,1em=16px,因此 2em=2x16px=32px。现在,如果您使用以下内容创建 HTML 文档

<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>

,则定义以下 CSS 规则。

body {font: normal 16px Arial, Helvetica, sans-serif;}

在网络浏览器 (Chrome) 中打开页面并打开浏览器开发工具 (ctrl+shift+I),您将看到 的默认字体大小code>

为 2em。您还将在样式选项卡上看到它是“从正文继承”。
仍在该场景的开发工具中,您可以在盒模型图上看到

顶部和底部边距的边距为 21.440px。如果您查看

的 CSS 默认值,您可以看到 margin-block-start: 0.67em;margin-block-end: 0.67 em; 请记住,大小调整是相对于父元素的字体大小,因此 0.67em 是相对于

字体大小,而不是 <; em; body>,您可以通过一点数学来验证这一点,0.67em x 32px=21.440px,这是盒模型图中

的边距大小。有关更多信息,请尝试 http://www.123webconnect.com/convert-px-em。 php

An em means "ephemeral unit" it is relative to the current font size of its parent element. For instance, the text in an <h1> heading is 2em by default. This comes from the fact that an <h1> inherits its text size from its parent element, the <body> of the document. If I set my <body> font-size to 16px (font-size: 16px;). My <h1> being 2em would inherit a size of 32px, because 2em is twice the size of 1em. In this case 1em=16px so 2em=2x16px=32px. Now if you create an HTML document with the following

<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>

Then you define following CSS rule.

body {font: normal 16px Arial, Helvetica, sans-serif;}

Open the page in a web browser (Chrome) and open the browsers development tools (ctrl+shift+I), you'll see the default font-size for an <h1> is 2em. You will also see on the styles tab that it is "Inherited from body".
While still in the Development Tools for this scenario you can see on the Box Model diagram that the <h1> margin is 21.440px on the top and bottom margins. If you look in the CSS defaults for <h1> you can see the margin-block-start: 0.67em; and margin-block-end: 0.67em; Remember sizing is relative to the font size of the parent element, so 0.67em is relative to the <h1> font size not the font size of the <body>, you can verify this with a little math, 0.67em x 32px=21.440px and this is the size of the margin of the <h1> in the Box Model diagram. For more information try http://www.123webconnect.com/convert-px-em.php

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文