ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSの文字間隔を設定する方法

CSSの文字間隔を設定する方法

青灯夜游
リリース: 2023-01-04 09:35:27
オリジナル
13655 人が閲覧しました

CSS では、文字間隔は、letter-spacing 属性を使用し、構文形式「letter-spacing: spacing value;」で設定できます。 Letter-spacing 属性は、文字間のスペースを増減できます。負の値も許可されます。これにより、文字間のスペースが減少し、文字が狭くなります。

CSSの文字間隔を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS では、letter-spacing 属性を使用して文字間隔を設定できます。

letter-spacing プロパティは、文字間の間隔 (文字間隔) を増減できます。負の値も許可されます。これにより、文字が互いに近づけられます。

例:

<p>这是正常的字符间距</p>
<p style="letter-spacing:10px;">这是加宽10px字符间距</p>
<p style="letter-spacing:-10px;">这是缩减3px字符间距</p>
ログイン後にコピー

CSSの文字間隔を設定する方法

説明:

letter-spacing 属性は、文字または漢字間の距離を増減するために使用されます。デフォルト値は 0 です。この属性は、正の長さ値または負の長さ値を受け入れます。正の長さ値を設定すると、文字間のスペースが増加します。負の長さの値を設定すると、文字間のスペースが減少し、文字が密集することが可能になります。重なっても。

詩など、単語数は少ないが強調する必要があるコンテンツの場合、必要に応じて適切な文字間隔を増やすことで、コンテンツを少しまばらにしてより美しくすることができます。たとえば、次の古代の詩の場合:

<h1>静夜思</h1>
<h2>唐•李白</h2>
<p>床前明月光,疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>
ログイン後にコピー

h1 タイトルと本文の内容をまばらで明確にしたい場合は、letter-spacing 属性を使用してこれを実現できます。 CSS コードは次のとおりです:

h1 {
 letter-spacing: 10px;
}
p {
 letter-spacing: 3px;
}
ログイン後にコピー

CSSの文字間隔を設定する方法

(学習ビデオ共有: css ビデオ チュートリアル )

以上がCSSの文字間隔を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート