HTMLの学習パート9：HTMLのテキストの色とフォントタイプを変更する方法
テキストとフォントタイプの色選択私たちが作成するHTMLドキュメントに適用することは、注意と考慮が必要な重要なことの1つです。フォントは、ドキュメントで使用される文字の種類です。
注意すべき点がいくつかありますたとえば、ウェブサイトのデザインに従って適用されるフォントのタイプ、適用されるフォントのタイプが訪問者がウェブサイトのコンテンツを読みやすくするかどうか、フォントのタイプがウェブサイトのテーマやトピックまたはコンテンツに一致するかどうか、適用されるテキストの色が背景に一致して訪問者を困難にしないかどうかなどテキストなどを読んでください。
HTML自体が要素を提供します具体的には、HTMLドキュメントでのフォントと色の適用を規制します。使用できるフォントには多くの種類がありますが、Webブラウザーに表示されるフォントは全体としてユーザーのコンピューターから取得されることも覚えておく必要があります。使用しているブラウザが当社のパソコンであれば問題ありませんが、他のパソコンのブラウザで開いた場合、そのパソコンでは適用されているフォントの種類が異なるため、デザインされたウェブデザインが無秩序になる場合があります。
そのため、標準フォントが使用されますWindows、Linux、Mac OSなどで一般的に利用できます。標準フォントは通常、ほとんどのWebブラウザーでサポートされているため、心配する必要はありません。使用できる次のタイプの標準フォント：
1.セリフフォントタイプ
セリフフォントは脚があるタイプのフォントですTimes New RomanやGeorgiaなどの各文字で。このタイプのフォントは、速くて読みやすい傾向があるため、一般に紙の印刷メディアに使用されます。
2.等幅フォントタイプ
モノスペースフォントは、文字がCourier、Courier New、Andale Monoと同じ幅のフォントタイプです。その性質上、このフォントは通常、プログラムの作成に使用されます。
3. Sans-Serifフォントタイプ
sans-serifフォントは、Arial、Verdana、Trebuchet MS、Helvetica、Calibriなどの各文字に脚があります。このフォントは、Webサイトのフォントタイプとしてよく使用されます。
4.筆記体フォントタイプ
筆記体フォントは、Comic Sansなどの書道または手書き文字を模倣するタイプのフォントです。このフォントは通常、あまりフォーマルではない記述の側面に使用されます。
5.ファンタジーフォントタイプ
ファンタジーフォントは、フォントマトリックス、ディズニーなどの特殊なフォント文字で視覚的に表示されるフォントの一種で、ページテキストにはほとんど使用されません。
HTMLのテキストの色とフォントタイプをよく理解するために、以下の説明を見てみましょう。
要素フォント
フォントタグを使用すると、テキストの色とサイズを調整または変更できます。 HTMLで提供されているフォント要素を使用することもできます。
この要素の使用はタグ<0000でマークされ、タグ</ font>で終わりますテキストの色とサイズの変更は、font要素にある次の属性を使用して行われます。
| 属性 | 機能 |
| 顔 | Webページで使用されるフォントの種類を示します |
| 色 | 使用するテキストの色を述べる |
| サイズ | 1〜7の値を持つテキストのサイズを表します |
HTMLでフォントタグを使用するコードの例を次に示します。
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Font</title>
</head>
<body>
<p><font face="Courier New" color="green" size="3">Claudio Andres Bravo Munoz menandatangani kontrak sebagai kiper FC Barcelona pada musim panas 2014 berasal dari Real Sociedad. Lahir pada 13 April 1983, di kota kecil Viluco de Buin, di daerah Santiago Cile. Ia mulai bermain sepak bola sejak kecil, walaupun awalnya bukanlah sebagai seorang kiper, sebaliknya ia bermain sebagai seorang striker dan kemudian menjadi pemain bertahan.</font></p>
</body>
</html>上記のコードをブラウザーで実行すると、次の画像のようになります。
現在の使用では、タグ<0000のみHTML 4.01でサポートされていますが、HTML5で削除されてもサポートされていません。これは、タグ<atibleの使用をCSSに置き換えることができるためです。CSS関数は、タグ<REEよりも優れており効率的です。
HTMLのフォント設定でCSSを使用する例を次に示します。
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan CSS - FONT di HTML</title>
<style type="text/css">
#p{
color: #ff00ff;
font-size: 20px;
font-weight: bold;
font-family:Rockwell, Calibri, Monospace;
font-style : oblique; }
#p1{
color:#0000FF;
font-size: 1em;
font-weight: normal;
font-variant: small-caps;
font-family: Andale Mono;}
</style>
</head>
<body>
<p id="p">Contoh penggunaan CSS untuk mengatur font style pada suatu teks di HTML</p>
<p id="p1">Contoh Berikutnya Ini</h5>
</body>
</html>結果は以下の画像のようになります。
CSSコードと画像を見た後これはブラウザで表示されますが、上記のコードのフォントプロパティが何であるかについては、多くの質問があります。ここでは、少しずつ説明します（ただし、CSSではなく、まずHTMLに焦点を合わせます）。
A. CSSフォントサイズ
フォントサイズは、サイズを決定するために使用されます表示するテキスト文字。そのため、HTMLドキュメントの各テキストに異なるフォントサイズを適用できます。前のコードの例のように、ピクセル、em、または％単位を使用してフォントサイズを決定できます。
#p{ font-size: 20px; }
#p1{ font-size: 1em; }emユニットの使用をお勧めします1emが16ピクセルのピクセルではありません。ただし、ピクセルの使用に慣れている場合も問題ありません。例では＃p1 {font-size：1em; 16ピクセル/ 16 = 1emなので、ピクセル値は16ピクセルです。
B. CSSフォントファミリー
フォントファミリは、HTMLドキュメントに適用されるフォントの種類を決定するために使用されます。例として、前のコードのfont-familyの使用例を見てください。
#p{ font-family:Rockwell, Calibri, Monospace;}
#p1{ font-family: Andale Mono;}#pには、ロックウェルという3つのフォントタイプがあります。CalibriとMonospace。つまり、最初に適用されるフォントのタイプはロックウェルです。ただし、ロックウェルのフォントタイプがユーザーのコンピューターで使用できない場合、適用されるフォントタイプはCalibriになります。次に、使用できない場合は、デフォルトのフォントであるMonospaceを適用します。
C. CSSフォントの太さ
フォントの太さは太字を印刷するために使用されます。ここにコードの例があります
前：
#p{ font-weight: bold;}
#p1{ font-weight: normal};D. CSSフォントスタイル
フォントスタイルは、通常、斜体、斜体の3つの値を使用できる斜体で技法を作成するために使用されます。フォントスタイルの使用例を次に示します。
#p{ font-style : oblique;} // Teks ditampilkan berbentuk condong
#p1{ font-style : normal;} // Teks ditampilkan biasa tanpa style
#p2(font-style : italic;} // Teks ditampilkan dalam huruf miringE. CSSフォントバリアント
バリアントフォントは、すべて大文字でテキストを印刷するために使用されます。以下はその使用例です。
#p{ font-variant: normal;} // Teks normal
#p1{ font-variant: small-caps ;} // Teks ditampilkan dalam huruf kapital semua上記の記事を読んだ後、私はあなたを願っていますHTMLドキュメントの色とフォントタイプを変更できます。次のHTMLチュートリアルは、qタグとblockquoteタグを使用してHTMLで引用を作成することです。
