ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3フォント属性の解析について

CSS3フォント属性の解析について

高洛峰
リリース: 2017-03-27 18:28:54
オリジナル
1585 人が閲覧しました

フォントのプロパティ:

フォントファミリー: {フォントファミリー: {フォントファミリー: {font-family: {font-family: {font-family:フォントファミリー: 筆記体 |値 |xx-小 |x-大 | | xx-大きい | 小さい |

フォントのスタイル: {フォントの太さ: 100-900 | 太字| 軽い | 通常}

フォントバリアント

: {フォントバリアント: 通常 | 小文字を継承}

フォント複合属性フォント: {font: font-style font-variant font-weight font-size font- family}

font-size と font-family は、フォント属性に固定された順序で指定する必要があります。フォントスタイル、フォントバリアント、フォントウェイトは自由に交換できます。

フォントの色: {color: 名前 rgb | hsl | rgba}

シャド​​ウ テキスト

: なし | ,] * または none | [, ]* }最初の値は影の水平方向の変位を表します。正または負の値。2 番目の値は影の垂直方向の変位を表し、3 番目の値は影のぼかし半径を表します。これはオプションです。オプション。

オーバーフローテキスト

text-overflow

は、テキストがオーバーフローした場合に省略マークを表示するかどうか、つまりテキストを省略するオーバーフロー方法を定義するために使用されます。他のスタイル属性定義はありません。オーバーフロー時に楕円を生成する効果を実現するには、テキストを強制的に 1 行で表示し (

white-space

:nowrap)、オーバーフローしたコンテンツを非表示にする (over-flow:hidden) も定義する必要があります。 {text-overflow: Clip | ellipsis}

Clip: 省略記号 (...) は表示されませんが、単純なクロップバー (主要なブラウザでサポートされています)

Ellipsis: 内のテキストが含まれている場合に省略記号を表示しますobjectoverflows (…) (女の子、Firefox はサポートしていません)

Control word-wrap

word-wrap

: {word-wrap:normal break-word}Normal: 制御連続テキスト word- Wrap

Break-word:content 単語の区切りが必要な場合 (

word-break

)、これも実現できますフォント サイズを変更しない

font-size-adjust

: {font-size-調整: なし | 数値}なし: フォント シーケンス内の各フォントを独自のサイズに準拠させるデフォルト値 数値: フォント シーケンス内のすべてのフォントを強制的に同じサイズにする

段落属性:

単語間隔単語間隔: {単語間隔: 通常 | 長さ}

文字間隔文字間隔: {文字間隔: 通常 | 長さ}

テキスト装飾

テキスト装飾

: {テキスト装飾: なし| 下線 | 上線 | line-through

垂直配置

vertical-align

: {vertical: 属性値}

水平配置text-align

: {text-align: sTextAlign}

テキスト変換-transform: {テキスト変換: なし | 大文字 | 小文字}

テキストインデント: {テキストインデント: 長さ}

テキスト行の高さ: {行の高さ: 通常の長さ}

空白文字の処理: {空白: 前 | ラップ前 |

テキストの反転

Unicode-bidi: {Unicode-bidi: 通常| bidi -override}

方向: {direction: rtl |inherit}

以上がCSS3フォント属性の解析についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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