VWユニットを使用しているテキストが機能しない

Question

私はVWユニットを使用してタイポグラフィのサイズを変更したいと考えていますが、そのときテキストは大きく、明らかにビューポートの幅よりも大きくなります。基本的に私のテキストは親の.containerの中で反応的なものにしたいので、pxやemのような静的なサイズのユニットを使うとテキストが決して切り取られたり、あふれたりすることはありませんか？あなたのフィドルが正しくレンダリングされ

HTML

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

CSS

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

h1 { 
    font-size: 40vw; 
} 

FIDDLE

Answer 1

。

• font-sizeは、古典的に、M.は、今のところそれで行こう。*
• 1vwは、ビューポートの幅の1％である大文字の幅に言及しました。

したがって、font-size: 40vwは「大文字のMの幅がビューポートの幅の40％になるようにこのテキストをレンダリングする」ことを意味します。言い換えれば、それぞれのキャラクターはかなり巨大になるでしょう。

これはすべて1つの単語であり、CSSはデフォルトで単語間を分割するだけなので、改行することはありません。 （単語内の文字を分割するには、要素上でword-break: break-allを使用します）。

コメントで、ヘッダーのフォントサイズを拡大してその中のフルテキストは、ビューポートの幅の何割かです。あなたの状況に応じて、あなたはどちらか

1. はvwではまだ、font-size小さく使用し、常に予測一定の幅ではありませんそのテキストを受け入れることができます。または
2. FitTextのようなフォントを動的にサイズ変更してみてください。

これは残念ですが、あなたが純粋なCSSで必要としていることをかなり行う方法はありません。デザイン目標を妥協するか、巧妙なJS /ハックを使用して達成するという選択がしばしばあります。

---

* font-size上の注意：私は上記の言ったことは本当にfont-sizeが働いているかではありません。ほとんどのフォントでは十分に近いですが、私の答えは読みやすくなります。実際の状況はより複雑です。

さらに正確な経験則はボディーの高さです。アセンダディセンダ（グラム、JとPのような文字の下部の下に（B、DとHような文字の上部）の上部から垂直距離 ）を同じ行に表示します。しかし、これは非常にコースであり、しばしば間違っています。最終的にはフォントメトリックになり、フォント間で大幅に変化します。