字体大小。我能确定什么?
字体大小实际上意味着什么?
让我们以 CSS 为例。我有 font-size
,我可以在其中指定 像素
、点
等数字。
那么,12px
是什么呢?意思是? 20pt
是什么意思?是字符的最大宽度,是最小宽度,还是最大高度?
我是否可以确定 font-size: 10px
的 5 个字符的宽度不会超过 50px
、不少于该宽度或恰好等于该宽度?
What does font size actually mean?
Let's take CSS. I have font-size
where I can specify a number in pixels
, points
etc.
So, what does 12px
mean? And what does 20pt
mean? Is it the maximum width of a character, is it the minimum one, is it the max height?
Will I know for sure that 5 characters of font-size: 10px
will have no more than 50px
, no less than that, or exactly that width?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(8)
每种字体都有一个内部比例尺,字形是相对于该比例尺绘制的。这是任意的,取决于字体设计者。字母“M”的内部高度可以为 0.5、1 或 700 个内部单位。
大小为 10 像素时,1 个内部字体单位 = 10 像素。
根据字体的设计,这可以无限制地渲染任何大小的字形。
Each font has an internal scale that the glyphs are drawn relative to. This is arbitrary and depends on the font designer. A letter 'M' could have an internal height of 0.5, 1, or 700 internal units.
At size 10px, one internal font unit = 10px.
Depending on the design of the font, this could render glyphs of any size, without constraint.
通常字体大小以像素=px或点=pt定义
注意 : 72 pt 等于 1 英寸 = 2.54 cm
屏幕的分辨率以 px 为单位定义。
显然,相同尺寸的显示器上的像素越多,每个像素就越小,因此如果 font-size 以 px 为单位定义,则字体大小也就越小。
那么,有什么区别?
当您看到字体大小单位的实际效果时,很容易理解它们之间的区别。一般来说,1em = 12pt = 16px = 100%。使用这些字体大小时,让我们看看将基本字体大小(使用正文 CSS 选择器)从 100% 增加到 120% 时会发生什么。
如您所见,随着基本字体大小的增加,em 和百分比单位都会变大,但是像素和点则不然。设置文本的绝对大小可能很容易,但访问者使用可在任何设备或任何机器上显示的可缩放文本要容易得多。因此,网络文档文本首选 em 和百分比单位。
来源:http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
Commonly font-size is defined in pixels = px or points = pt
Note: 72 pt equals one inch = 2,54 cm
The resolution of a screen is defined in px.
Obviously, the more pixels on a monitor of equal dimensions the smaller each pixel and hence the smaller the font size if font-size is defined in px.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Source: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
正如其他答案所说,没有任何保证,但我们经常需要一些近似的经验法则。根据经验:这里有三种 true type 字体,尺寸为 120 像素。灰色块对应于 Chrome 中渲染的
span
(padding=0),叠加的红色矩形高 120 像素。我们看到(至少对于这些字体;记住:不保证)大小可以被同化为“标称高度”,它涵盖了大多数(但不一定是全部)常见字符的后代和上升字符。
As other answers have said, there are no guarantees, but we often need some approximate rule of thumb. Empirically: here are three true type fonts, at 120px. The gray blocks correspond to the
span
as rendered in Chrome (padding=0), the superposed red rectangles are 120 pixels high.We see that (at least for these fonts; remember: no guarantees) the size can be assimilated to a "nominal height", that covers descendants and ascendants of most (but no necessarily all) common characters.
根据 W3 建议,pt 通常用于打印,而 px 用于屏幕。
但问题是 CSS px 不一定是实际的屏幕像素。对于移动设备来说这一点很明显,因为移动设备的默认像素比例不是 1:1。
请查看这篇文章了解更多详细信息。
通常对于网站,您应该以 px 为单位设置基本字体大小,并使用 em 为不同元素设置后续大小。
As per the W3 recommendation pt is generally for print, while px is for screen.
But the thing is CSS px is not necessarily an actual screen pixel. This is apparent when it comes to mobile devices, which have a default pixel scale other than 1-to-1.
Check out this article for a bit more detail.
Generally for sites, you should set a base font size in px, and subsequent sizes for different elements using em.
嗯...每个人都已经解释了单位的含义,所以唯一需要回答的是从哪里测量到哪里。我的猜测是您正在使用的字体中所有字符的从最低点到最高点。即本文中从“上升高度”到“下降高度”:Wiki - Typeface< /a>
Well...everyone has already explained what the units mean so the only thing left to answer is from where to where to measure. My guess would be from the lowest to the heighest possible point of all characters in that font you are using. That is, from the "ascender height" to the "descender height" in this article: Wiki - Typeface
这很大程度上取决于您使用的字体。
以默认的SO字体为例:
10 'm 比 10 'i 宽:
嗯嗯嗯嗯
iiiiiiiiii
但是将其声明为“代码”,我们得到了所谓的等宽字体,其中两者具有相同的宽度:
即使在这里,高宽比也取决于字体。
所以你的明确答案是:不。你无法确定。
It strongly depends on the font you're using.
Take the default SO font for example:
10 'm's are wider than 10 'i's:
mmmmmmmmmm
iiiiiiiiii
But declaring it as 'code' we get a so-called monospaced font, where both have the same width:
And even here the height-to-width-ratio is dependent on the font.
So your definite answer would be: No. You can't tell for sure.
pt=点(1 pt 与 1/72 英寸相同)
px=像素(计算机屏幕上的点)
pt=point (1 pt is the same as 1/72 inch)
px=pixels (a dot on the computer screen)
试试这个 calc 是否有帮助
另外,在一段代码中(用于显示图形/文本的图案然后打印它)我使用了两个独立的代码执行方向:一个用于打印案例,另一个用于展示案例。
一切都在 pt 中。要将 cm 中的输入数据转换为 pt,我使用了:
显示案例尺寸计算与打印案例不同,因为它们取决于屏幕分辨率、屏幕上的图案缩放等。然后您将获得适合 1 的显示点数打印页厘米:
要重新缩放字体,您可以获取其大小数字(以 pt 为单位)并使用比例系数调整其大小:
Try if this calc can be helpful
Also, in a piece of code (to display a pattern of graphics/text and then print it) I used two independent directions for code execution: one for printing case, other for display case.
Everything is in pt. To convert input data in cm into pt I used:
Display case size calculations differ from printing case, as they depend on screen resolution, pattern scaling on screen etc. Then you get amount of displayed pts that fit in what should be 1 cm on printed page:
The scale of what is displayed can be calculated as:
To rescale a font, you get its size number (that is in pt) and resize it with scale coefficient: