我的理解是CSS中的“vw”单位指的是视口宽度的1%增量。
但是,当我创建一个应该是视口宽度的10%的单倍间距字体时, 它会接近~6%(1/16) :
<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: monospace;"> 123456789012345670 </div>如果我使用的是不是等宽的字体,那就不一样了,但它仍然是关闭的:
<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: serif;" id="test8"> MMMMMMMMMMMMMMMMMMMM </div>我正在使用“M”,因为这是任何字体中典型的“最宽字符”。 在这种情况下,我看到11个字符,因此每个字符大约是视口宽度的9%。 这仍然是10%。
什么赋予了什么? 与字体大小一起使用时,“vw”实际上意味着什么,特别是当每个字符具有相同的宽度时?
My understanding is that the "vw" units in CSS refer to 1% increments of the viewport width.
However, when I create a mono-spaced font that is supposed to be 10% of the viewport width, it winds up closer to ~6% (1/16):
<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: monospace;"> 123456789012345670 </div>If I use a font that is not monospace it not quite as bad, but it is still off:
<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: serif;" id="test8"> MMMMMMMMMMMMMMMMMMMM </div>I am using "M" as this is the typical "widest character" in any font. In this case I see 11 characters, so each one is about 9% of the viewport width. This is still off by 10%.
So what gives? What does "vw" actually mean when used with font size, especially when each character has the same width?
最满意答案
指定font-size描述了em-square的大小。 字体度量包括每个字形的前进宽度,其与em-square成比例。 它是预先宽度(以及字母和单词间距)的总和,用于确定一行中适合的字符数。
例如,如果我们采用等宽的Windows Courier New字体,则字形都具有相同的前进宽度,即字体大小的1229/2048。
因此,如果我们的字体大小为10vw,字母和字间距为0,那么在与视口一样宽的行框中,我们应该得到100 /(10 x 1229/2048)= 16.66个字符(或截断后的16个字符) 。
body { margin:0; font-size:10vw; font-family:'Courier New'; word-break:break-all; }ABCDEFGHIJKLMNOPQRSTUVWXYZSpecifying the font-size describes the size of the em-square. The font metrics include the advance width of each glyph which is proportional to the em-square. It is the total of the advance widths (and letter and word spacing) that determines how many characters fit on a line.
For example, if we take the monospaced Windows Courier New font, the glyphs all have the same advance width which is 1229/2048 of the font-size.
So, if we have a font-size of 10vw and 0 letter and word spacing, we should get 100 / (10 x 1229/2048) = 16.66 characters (or 16 characters once truncated) in a line box that's as wide as the viewport.
body { margin:0; font-size:10vw; font-family:'Courier New'; word-break:break-all; }ABCDEFGHIJKLMNOPQRSTUVWXYZ
更多推荐
发布评论