我的理解是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;
}
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Specifying 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
更多推荐
发布评论