13

CSSを使用して文字を近づける方法はありますか? 行の高さを調整できることは知っていますが、フォントを近づける方法があるかどうかはわかりませんでした。

4

4 に答える 4

37

あなたは探しているletter-spacing 

#id { letter-spacing: -1px; }

参照

于 2012-12-09T11:30:25.873 に答える
8

答えは、「フォント」、「凝縮」、「スクイーズ」の意味によって異なります。

プロパティを使用して、（フォントファミリから）フォントのより凝縮された書体（特定のフォント）を選択できますfont-stretch。しかし、それは何も絞りません。より凝縮されたデザインの書体をピックアップするだけです。人々のコンピュータで一般的に利用可能なフォントには、そのような書体はありません。一部のダウンロード可能なフォント（Webフォント）はそうします。そして、ほとんどの場合、フォントのファミリ名であるかのように特定の書体名だけを使用することで、よりクロスブラウザの方法でそれらを使用できますfont-family: Arial Narrow。（注：Arial Narrowは一部のコンピューターでのみ使用可能であり、基本的なArialよりもはるかに少ない頻度です。）

使用するフォントにOpenType形式のカーニング情報がある場合は、特定のCSS手法を使用してカーニングを提案できます。Webページで一般的に使用されるほとんどのフォントには、そのような情報はありません。（例外：Palatino Linotype、Times New Roman、およびCalibriやCambriaなどのMicrosoft Cフォント。）適切な宣言：

body { 
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
font-feature-settings: "kern";
}

これらの設定の影響は、あるとしても、かなり小さい傾向があります。野蛮な意味で「絞る」という意味ではありません。むしろ、それは活字的に良くなるように微妙な方法でレンダリングを変更します。テキストの幅は少し狭くなる可能性がありますが、それは偶然の副産物です。

ネガティブを使用する場合letter-spacing、それは野蛮な圧迫を意味します。たとえば、.のような小さな値を持つ大きなサイズのサンセリフテキストの場合、それは時々意味をなすかもしれませんletter-spacing: 0.03em。それでも、結果を評価する必要があります。特に、絞ったときに奇妙に見える可能性のある文字の組み合わせ（「rl」や「te」など）に注意してください。そして、ほとんどの場合、文字の間隔が広すぎる、またはテキストが広すぎると思われる場合は、フォントの通常の表示を中断するのではなく、別のフォントを使用することを検討してください。

于 2012-12-09T14:45:55.160 に答える
7

ですべての文字間の距離を指定できます

letter-spacing: 0.1em;

ただし、各文字をスパンでラップしない限り、個々の文字をカーニングすることはできません

于 2012-12-09T11:30:53.497 に答える