在字体大小上使用ch(字符)单位

  • 本文关键字:ch 字符 单位 字体 css
  • 更新时间 :
  • 英文 :


我的问题与这个问题非常不同:字体缩放基于容器的宽度

前面的问题和答案没有提到ch单元。

CSS Tricks展示了一个使用ch单位来调整文本大小的例子,https://css-tricks.com/almanac/properties/f/font-size/.

我假设将font-size设置为说75ch将设置字体大小,以便在其容器内每行最多容纳75个字符(或零)。因此,当容器宽度增大或缩小时,font-size相应适应,因此每行始终有75个字符。

参见应用于Web的排版样式元素http://webtypography.net/2.1.2 " 45到75个字符被广泛认为是令人满意的行长">

然而,它不是这样工作的。我可以看到max-width: 75ch限制文本的宽度为75个字符。但那完全是两码事。

如果ch单元不能在font-size上使用,根据容器的宽度创建响应式字体大小,那么ch是基于在font-size上使用的时候(根据CSS技巧的例子)?

<div class="text-content">
<p>Nus moluptatur? Quid eum in nosandit, ut voluptae num dit faccumquis qui vollab inctaquam, undis antis et voluptae. Itatenditem qui tem nonecus repedi doluptae pre explautessum is dolupta doluptatum que perunt lant rero te dolestium fugitat emporeiur, ipit est od minim dolesti asitati onsedisci dit magnatecatur se nimini repe est voluptat. Alitatur seruptat. Dercipis nonsequ iandae venim erum que rerionectas ad quate aut undi dis es alit adis dia dio te miligen tinvelis nustis mi, ut militatur atiosam, etur aut eum ut ad qui nonet fugiam facculpa pro molenis et, consenim volorer ercienis endaniste est ut exeria dis voluptam si dolorat. Tationsed maximpellant maximod eiunt undisque imustruntus mintio blant lamet ea volupta tiores ducita qui dolut aut ex ex enitas soluptur? Ebit eium et et exeruntur? At autatisquas siti cone cuptaspedit lamusae sequidi coreperion ea illaut liquaec tusamus, aborepra qui to ellabore vellace atemporemqui ulparchilia nis sit utet is abo. Sa susdaerumquo voluptatibus corro que et laboribus repudipid es is vid maio. Ut doluptate conseniet que volumquia quam excerib erspernamet dolorio. Itaturehenti sum, estiur sinusciliquo bla es enimus autate ex entotas consendio. Ut lit optatibustes vit ute que mo milliciati re, odi dolum re velesto rercitae re elenis exerit omniate et, cuptibusdae quamus.</p>
</div>
.text-content {
max-width: 700px;
}
p {
font-size: 75ch;
}

参见JS Fiddle https://jsfiddle.net/n98oq5Lc/

ch作为一个单位只在大多数情况下有意义,如果你正在处理一个等宽字体-那么75ch max-width真的意味着不要让宽度超过75个字符。但是对于非等宽字体,CSS不会计算字符数它会使用它认为的宽度ch来表示(例如https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units如果你的文本中有很多i字符那么元素中的字符数将与有很多m的元素中的字符数不同

你可以得到一个响应的字体大小,通过定义它的vw和你的元素宽度的vw。但是,它不能保证一行中有多少字符(除非你回到等宽的想法)。

我尝试了CH,它很糟糕,因为让我们说你有词:里斯本…前两个字符LI的大小与S相同,因此基于max-width: 2ch;=比;LI-S-B-O-N

如果您尝试ch3,则它将是LIS-B-ON

基本上不能按预期工作。

No.

ch是宽度,但字体大小是高度.

所以75ch只是调整垂直字体的大小,而不是相对于容器的宽度。

最新更新