ホームページ > 記事 > ウェブフロントエンド > CSS3の漢字とフォントに関するプロパティの紹介

CSS3の漢字とフォントに関するプロパティの紹介

不言オリジナル: 2018-08-24 10:37:071555ブラウズ

この記事では、CSS3 の漢字とフォントに関連する属性について説明します。必要な方は参考にしていただければ幸いです。

1 text-shadow属性

(1) 機能

ページ上のテキストに影効果を追加します。

(2)

text-shadowの使い方: 長さ長さ長さ色 (水平距離、テキストから影までの垂直距離、影のぼかし半径、影の色)

注:

shadow は残しますテキストの水平距離と垂直距離: 指定する必要があります。負の値も指定できます。

影のぼかし半径: 影が外側にぼかされるときのぼかし範囲を表します。半径が大きいほど、影は外側に向かってぼやけます。オプションのパラメーター。省略した場合、デフォルトは 0 です。これは、影が外側にぼかされないことを意味します。

Shadow color: オプションのパラメータ。指定されていない場合、CSS2 で color 属性の色が使用されます (実際には Firefox と Opera、その他は省略をサポートしておらず、CSS3 では省略された場合は描画されません)。ブラウザで指定されたデフォルトの色が使用されます。

(4) 複数の影を指定する

text-shadow：10px 10px #f39800,
                         40px 35px #fff100,
                        70px  60px #c0ff00；

この機能は Chrome、Firefox、Opera ブラウザのみがサポートしています。

(3) ブラウザのサポート

これまでのところ: Safari、Chrome、Firefox、および Opera ブラウザがこの属性をサポートしています。

text-shadow: 5px 5px 5px grey; (灰色の影、水平方向と垂直方向の両方で分子から 5 ピクセル離れる)

2 ワードブレーク属性

(1) 機能: テキストを自動的に描画するWrap

(2) 値：normal (ブラウザのデフォルトの改行ルールを使用)、keep-all (半角スペースまたはハイフンでのみ改行可能)、break-all (単語内での改行を許可)

(3) ) ブラウザーのサポート

これまでのところ: Safari、Chrome、IE ブラウザーはこの属性をサポートしています。

3 word-wrap属性

(1) 機能: 長い単語やURLアドレスを自動的に折り返す。

(2) 値: 通常 (ブラウザのデフォルト処理)、ブレークワード (長い単語または URL アドレス内の改行)

(3) ブラウザのサポート: すべてのブラウザ。

4 Web フォントと @font-face 属性

(1) 機能: Web ページにサーバーサイドフォントを表示。

(2) 使用方法:

@font-face{
    font-famliy：WebFont；
    src：url（‘font/Fontin_Sans_R_45b.otf’）  format（“opentype”）；
   font-weitht：normal；
}
h1{
    font-family：WebFont；
}

5 font-size-adjust属性

(1) 機能: フォントサイズを変更せずにフォントの種類を変更する

(2) 使用方法:

アスペクト値 (スケール値): フォントを別のフォントに変更するときに、フォントサイズを基本的に変更しないようにするために使用できます。 (定数)

計算方法: x-height 値 (このフォントに書かれた小文字の X の高さ (ピクセル単位)) をフォントのサイズで割ったもの。

p{
   font-size：16px；
   font-famliy：Times New Roman；
   font-size-adjust：0.46（aspect值）
}

(3) ブラウザのアスペクト値の計算式:

font-size-adjust 属性でアスペクト値を指定し、フォントを別のフォントに変更した場合、変更後のフォントサイズのブラウザの計算式:

c = (a / b) s

a:実際に使用するフォントのアスペクト値を示す、b:修正前のフォントのアスペクト値を示す、

s:指定されたフォントサイズを示す、c:変更時のフォントサイズを示すブラウザが実際に表示するフォントサイズ。

(4) 属性値は「none」

に設定できます。これは、font-size-adjust 属性を設定せず、フォントの元のサイズに従って表示することと同じです。

6 rem 単位を使用してフォントサイズを定義する

(1) rem フォントサイズ単位は、要素の親要素に関係なく、ページのフォントサイズは何ですか。

html｛font-size：62.5%｝（大多数浏览器中，默认字体大小为16个像素，使用62.5%， 使浏览器自动计算出10个像素）
small｛font-size：1.1rem；｝
strong｛font-size：1.8rem；｝

(2) ブラウザのサポート:

これまでのところ: IE9 を含むすべてのブラウザがサポートされています。

(3) IE8 以前のバージョンと互換性があります (rem フォント単位は使用できません)

html｛font-size：62.5%｝
small｛font-size：11px；font-size：1.1rem；｝
strong｛font-size：18px；font-size：1.8rem；｝