CSS3 -- フォントと色のスタイルをテキストに追加する方法-CSSチュートリアル-php.cn

この章では、ウェブページのテキストをより美しくすることができます

テキストのいくつかのプロパティについて

font-family: テキストフォント
font-size: テキストサイズ
color: テキストの色
font-weight: テキストの太さ
text-decoration: より多くのテキストのスタイル

font-family (フォントファミリー)

合計で 5 つのファミリーがあります: sans-serif (サンセリフ) )、serif (セリフ)、monospace (等幅)、cursive (筆記体...これが本来の意図です)、fantasy (ファンタジー?) 右の図を参照してください

CSS font-family の仕組み

body {
	font-family: Verdana, Geneva, Arial, sans-serif;
}

ログイン後にコピー

顧客のコンピュータで Verdana を探します。そうでない場合は、Geneva を探します。まだない場合は、顧客を探します。マシン内のサンセリフフォント (通常、すべてのコンピューターにはサンセリフフォントが含まれています。注意: サンセリフは特定のフォントではありません)

フォント名にスペースが含まれている場合は、フォント名を引用符で囲むことができます。次のような名前: font-family: "Courier New", Courier;

指定したフォントをユーザーが使用できるようにしたいが、ユーザーがこのフォントを持っているかどうかわからない場合

Webフォントはここにあります！

使い方

フォントファイルを見つけます:サフィックス名はwoff、svg、eot、otf、ttfです
このフォントをウェブ上に置くと、Googleのフォントホスティングサービスを使用できます。無料です
CSSに@font-face属性を追加します
```
@font-face {
	font-family:"Emblema One";
	src:url("www.某网站.com");
}/*那个网址就是字体URL */
```
ログイン後にコピー
今回はユーザーマシン上にEmblema Oneという名前のフォントを作成するのと同じです
ローカルフォントのように使用してください、使用箇所に注意してください@font-family の後のフォント

この欠点は、フォントの読み込みに時間がかかることです。そのため、顧客が初めて Web サイトにアクセスし、このフォントを持っていない場合は、時間がかかります。フォントを調整する間

サイズには 3 つのフォント単位があります

: px (ピクセル)、%、em (これは倍数であり、em=% を 100 で割ったものです)

h1 {
	font-size:220%;
}

ログイン後にコピー

フォントサイズを指定します - キーワード (xx-small、x -small、small、medium、large、x-large、xx-large)

各キーワードで表されるサイズは、 client

それでは、テキストサイズを指定したらどうでしょうか

まず、キーワードを通じてのテキストサイズを定義できます。クライアント側、これは反対側で一般的に使用されるサイズです

その後、パーセントまたは em を使用して、

フォントサイズを表現するために px ピクセルを使用することはお勧めできません。ただし、この方法でテキストのサイズを正確に決定できますが、古いバージョンの IE ブラウザではスケーリングがサポートされませんフォントを変更します太さ

キーワードのサイズは 5 つあります。つまり、bold (太字)、bolder (より太い)、inherit (前のレベルの太さを継承)、lighter (より細い)、normal (標準) です

フォントの太さを 100 から 900 (100 の倍数) までの数値に設定する方法もありますフォントにスタイルを追加します

タイプは 4 つあります:継承 (お父さんから継承)、斜体(イタリック)、ノーマル(ノーマル)、オブリーク(オブリーク)

イタリックとオブリークの違いは、前者はこのフォントのイタリック体を使用し、表示方法がフォントファイル内にあるのに対し、後者は直接表示するという点です。斜体は正しい単語です。。。でも、ほぼ同じようです

颜色

Demo设置的颜色

body {
	background-color:red;
	background-color:rgb(80%, 40%, 0%);
	background-color:rgb(204, 102, 0);
	background-color:#66ccff;
}

ログイン後にコピー

这是四种设置颜色的方法，第一种是关键字，这个一般是小学生在用的吧，支持的颜色不多

第二种是使用rgb（red、green、blue）百分比，那些百分比意思是依次是红/绿/蓝的量（怎么说呢，越大就越含有这个颜色）

第三种和第二种相似，只不过从0%~100%改成了0~255

最后一种是十六进制码，意思是：

前两个代表红的十六进制、中间两个是绿的、最后两个是蓝的

把十六进制转成10机制就变成了第三种设置颜色的方法了

对于文本和背景，要使用对比度比较大的颜色，这样可读性才好

文本装饰（text-decoration）

不多说，直接看效果：blink inherit line-through none overline underline

箇条書き

CSS は、font-family、font-weight、font-size、font-style など、フォントの外観を制御するための多くのプロパティを提供します。
font-family は人々のグループです。共通の特徴を持つ Web 用
のフォントファミリには、セリフ体、サンセリフ体、等幅体、筆記体、ファンタジーが含まれます。セリフとサンセリフが最も一般的に使用されます
font-family CSS プロパティで Web フォントを使用しない限り、訪問者があなたの Web ページに表示するフォントは、各自のコンピュータにインストールされているフォントによって異なります
ユーザーが好みのフォントをインストールしていない場合に備えて、候補フォントを指定しておくことをお勧めします
最後のフォントは、別のフォントが見つからない場合に備えて、セリフやサンセリフなどの一般的なフォントにする必要があります。参照このツールは適切なフォントを置き換えることができます
特定のフォントを使用したいが、ユーザーがこのフォントをデフォルトでインストールしていない可能性がある場合は、 @font-face ルールを使用できます
フォントサイズは通常は、キーワード、ピクセルピクセル、パーセンテージ、em 仕様です
ピクセルを使用してフォントサイズを指定する場合、文字の高さが何ピクセルであるかをブラウザーに伝えることになります
em と % は相対的なフォントサイズであるため、 em と % を使用してフォントサイズを指定します。これは、フォントサイズが親要素のフォントサイズを基準にして決定される必要があることを意味します
相対フォントサイズを使用すると、ページがより保守しやすくなります
フォントサイズを使用する本文ルール内のキーワードを使用して、基本的なフォントサイズを設定します。これにより、ユーザーがテキストを大きくまたは小さくしたい場合、すべてのブラウザでフォントサイズを比例的に拡大縮小できます
CSS の font-weight プロパティを使用してテキストを作成できます太字
フォントスタイルプロパティを使用します。斜体または斜体テキストの作成に使用されます。斜体または斜体のテキストは斜めになります
ウェブの色は、赤、緑、青を異なる量で混ぜることによって得られます
赤100%、緑100%、青100%を混ぜると白になります, すべての 0% は黒です
CSS には 16 の基本色と 150 以上の拡張色があります
赤、緑、青のパーセンテージを使用して希望の色を指定することも、数値を使用することもできます値(0~255)、または16進コード
必要な色の16進コードを見つけるには、画像編集アプリケーションの色選択ツールを使用できます
色を表す16進コードは6 桁、各ビットは 0 ～ F を指し、最初の 2 つは赤の数を表し、真ん中の 2 つは緑、最後の 2 つは青です
text-decoration 属性を使用して、これに下線を作成できます。下線付きのドキュメントはユーザーによってリンクテキストと誤解されることが多いため、この属性は注意して使用してください