CSS3 -- フォントと色のスタイルをテキストに追加する方法

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

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

• 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フォントはここにあります！

使い方

1. フォントファイルを見つけます:サフィックス名はwoff、svg、eot、otf、ttfです

2. このフォントをウェブ上に置くと、Googleのフォントホスティングサービスを使用できます。無料です

3. CSSに@font-face属性を追加します

   @font-face {
   	font-family:"Emblema One";
   	src:url("www.某网站.com");
   }/*那个网址就是字体URL */

   今回はユーザーマシン上にEmblema Oneという名前のフォントを作成するのと同じです

4. ローカルフォントのように使用してください、使用箇所に注意してください@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 属性を使用して、これに下線を作成できます。下線付きのドキュメントはユーザーによってリンク テキストと誤解されることが多いため、この属性は注意して使用してください

以上がCSS3 -- フォントと色のスタイルをテキストに追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。