スラッシュを含むCSSのフォントのサイズ


133

ここでスラッシュはどういう意味ですか:

font: 100%/120%;

4
font-sizeスラッシュは受け入れません。正しいプロパティはfontです。
BoltClock

これらはどうですか?背景:「rgba(0、0、0、0)なし繰り返しスクロール0%0%/自動パディングボックスボーダーボックス」
jerinho.com

回答:


195

これは実際には2つのプロパティを設定し、以下と同等です。

font-size: 100%;
line-height: 120%;

公式ドキュメントを引用するには:

このプロパティの構文は、フォントに関連する複数のプロパティを設定するための従来の活版印刷の省略表記に基づいています。

David Mがコメントで述べたように、これはタイプフェイスサイズを「x  pt on y  pt」と指定して、行の高さのグリフサイズを示すという植字の伝統を反映しています。

しかし、あなたの質問の例は実際には間違っており、ブラウザによって無視されます:これらの2つのプロパティはfont省略表記でのみ組み合わせることができ、少なくともフォントサイズとファミリの両方を指定する必要あります。font: 100%/120%;したがって、単に書くだけでは十分ではありません。ただし、一般的なファミリ名を追加して有効にすることもできます。例:

font: 100%/120% serif;

53
これは、たとえば「10pt on 12pt」または「10pt / 12pt」のようにフォントを設定する古いタイプセット構文をミラーリングするためのものです。
David M

1
私は実際にこれをかなり使用しています。私が一緒に仕事をしているデザイナーは、例えば「14 over 22」のようにサイジングを常に指します。私はある日偶然それを入れて、それが機能したときに驚いた/満足しました。
ディランルークス2013年

1
クイック:このフォーマットでもfont-familyを指定する必要はありませんか?私のブラウザはこのプロパティを無視しています:font:12px / 16px; これを受け入れる:font:12px / 16px sans-serif; この動作もここに
kumarharsh 2013

@Harshはい、正式な定義でfontわかるように、省略形のプロパティにはファミリー(およびサイズ)が最低限必要です。
Konrad Rudolph

説明をありがとう。カジュアルな読者はSIZE / LINE_HEIGHT宣言のみが機能すると想定できるという点で少し誤解を招くので、おそらく回答(または質問)を更新できます。
kumarharsh 2013

15

Konradがこれを取得しましたが、スタイルシートを短縮するために使用できる、このようなCSS省略プロパティがたくさんあります。あなたがそれらに気づいていない場合、それらのいくつかは少し不可解に見えます。


ただし、ほとんどの省略形は関連するスタイルプロパティを扱います(例:)border-*。デビッドは私の回答へのコメントで良い説明をしました。略記が不可解であることについては、確かに本当ですが、とても便利で、学ぶのも非常に簡単です。
Konrad Rudolph、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.