使用大众单元的文本不起作用 [英] Text using VW unit not working

问题描述

我希望使用 VW 单位来调整我的排版大小，但这样做时文本很大并且明显大于视口宽度.本质上，我希望我的文本在父 .container 中具有响应性，因此文本永远不会像使用 px 或 em 这样的静态大小单位那样被裁剪或溢出?

HTML

<h1>响应式排版！</h1>

CSS

.container {宽度:100%；背景:红色；高度:100%；}h1{字体大小:40vw；}

小提琴

解决方案

您的 Fiddle 正在正确呈现.

• font-size，传统上是指大写字母 M 的宽度.让我们暂时使用它.*
• 1vw 是视口宽度的 1%.

因此，font-size: 40vw 大致意思是渲染此文本，使大写字母 M 的宽度为视口宽度的 40%".换句话说，每个单独的角色都会非常巨大.

它不会换行，因为它都是一个单词，而且 CSS 默认只在单词之间换行.(要中断单词中的字符，您可以在元素上使用 word-break: break-all.不过，它通常看起来很糟糕.)

您在评论中确认您正在尝试放大标题中的字体大小，以便其中的全文是视口宽度的某个百分比.根据您的情况，您可以

1. 使用较小的font-size，仍然是vw，并接受文本并不总是可预测的固定宽度；或
2. 尝试使用 FitText 之类的方法来动态调整字体大小.

很遗憾，但是没有办法用纯 CSS 来做你想做的事；通常情况下，您的选择是在您的设计目标上妥协或使用一些巧妙的 JS/hacks 来实现它.

<小时>

* 关于 font-size 的说明:我上面所说的并不是真的 font-size> 解决了；对于大多数字体来说，它恰好足够接近，这使我的答案更易于阅读.实际情况更为复杂.

更准确的经验法则是体高，即到上升器顶部的垂直距离(像b、d 和 h) 到降序的底部(字母的下部，如 g、j 和 p) 在同一行.然而，即使这是非常理所当然的，而且经常是错误的.它最终归结为字体指标，并且会因字体而异.

I'm hoping to use VW units to size my typography, but when doing so the text is huge and obviously larger than the viewport width. Essentially I want my text to be responsive within the parent .container, so the text is never cropped or overflowed as it would be if using a static size unit like px or em?

HTML

<div class="container">
    <h1>Responsive Typography!</h1>
</div>

CSS

.container {
  width: 100%;
  background: red;
  height: 100%;
}

h1 {
  font-size: 40vw;
}

FIDDLE

解决方案

Your Fiddle is rendering correctly.

• font-size, classically, referred to the width of a capital letter M. Let's go with that for now.*
• 1vw is 1% of the viewport width.

Thus, font-size: 40vw roughly means "render this text such that the width of a capital letter M would be 40% of the viewport width". In other words, each individual character is going to be pretty huge.

It's not going to break to a new line because it's all one word, and CSS only breaks between words by default. (To break on characters within a word, you would use word-break: break-all on the element. It usually looks terrible, though.)

You confirmed in a comment that you're trying to scale up the font size in your header so that the full text in it is some percentage of the viewport width. Depending on your circumstances, you can either

1. use a smaller font-size, still in vw, and accept that text won't always be a predictable fixed width; or
2. try something like FitText to dynamically resize the font.

It's a shame, but there isn't a way to do quite what you want with pure CSS; as is often the case your choices are to compromise on your design goal or use some clever JS/hacks to achieve it.

---

* A note on font-size: what I said above isn't really how font-size is worked out; it just happens to be close enough for most fonts and it makes my answer easier to read. The actual situation is more complicated.

A more accurate rule-of-thumb is the body height, i.e. the vertical distance from the top of an ascender (upper part of letters like b, d and h) to the bottom of a descender (lower part of letters like g, j and p) on the same line. However, even this is very course and often wrong; it ultimately comes down to the font metrics, and will vary significantly between fonts.

这篇关于使用大众单元的文本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！