説明

要素のフォント サイズを定義します。 サイズはいくつかの方法で設定できます。 一連の定数 (xx-small、x-small、small、medium、large、x-large、xx-large) によってサイズが指定されます。これは絶対サイズと呼ばれます。

実際のところ、これらはブラウザの設定やオペレーティング システムに依存するため、完全に絶対的なものではありません。

別の定数セット (大きい、小さい) は、相対的なフォント サイズを設定します。 サイズは親要素から継承されるため、これらの相対サイズが親要素に適用されて、現在の要素のフォント サイズが決定されます。

最終的に、フォント サイズは、要素の親の font-size プロパティの値に大きく依存します。

図に示すように、フォント サイズ自体は、ベースラインからピンの上部までの高さとして定義されます。 1.

米。 1. 文字サイズ

構文

フォントサイズ: 絶対サイズ | 相対的なサイズ | 意味 | 興味 | 継承する

価値観

絶対サイズを設定するには、xx-small、x-small、small、medium、large、x-large、xx-large の値が使用されます。

HTMLのフォントサイズとの対応を表に示します。 1.

相対的なフォント サイズは、大きい値と小さい値で指定されます。

また、有効な CSS 単位 (em (要素のフォントの高さ)、ex (x 文字の高さ)、ポイント (pt)、ピクセル (px)、パーセンテージ (%) など）を使用することもできます。親要素のフォント サイズは次のとおりです。 100%とみなします。 負の値は許可されません。

HTML5 CSS2.1 IE Cr Op Sa Fx

フォントサイズ

デュイ テ フェギファシリシ Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diem nonummy nibh euismod Tincidunt ut lacreet dolore magna aliguam Erat volutpat。あなたの行動を最小限に抑えて、ウラムコーパーの疑いとロボティス・ニスルの行動を実行し、結果を得ることができます。

結果

この例

図に示されています。 1.

米。 2. font-size プロパティの使用

オブジェクトモデル

document.getElementById("要素ID ").style.fontSize

• ブラウザ
• CSS
  • 導入
  • 書類の種類
  • スタイルタイプ
• PHP

しかし、私が本当に言いたかったのは次のようなことでした。

フォトショップ
• HTML
• RNR

それらの。 今後は、私が説明するすべてのタグをメインの HTML テンプレートのタグ間に挿入する必要があることを理解してください。 そして

さて、私たちの章に戻りましょう; コンテナタグは、タイトルにリストされているすべての機能を実行するために使用されます。

さて、本題に戻りましょう。

HTMLの別セクションのテキストのサイズ、フォント、色を変更するには、コンテナタグがあります。 別のテキスト

順番に始めて、タグ内で別のセクションのテキストの色を変更する方法を学びましょう。 フォント属性を配置する必要があります 色このような：

color="赤"> 別のテキスト属性値 色 body タグの bgcolor テキスト属性と同じです。つまり、英語の単語 (ブラック、グリーン、シルバー、ライム、グレー、オリーブ、ホワイト、イエロー、マルーン、ネイビー、レッド、ブルー、パープル、ティール) で指定できます。 、フクシア、アクア）または RGB の色番号（#000000 ～ #FFFFFF）

face="タホマ"> 別のテキストフォントはテキストをより特別な外観にするのに役立ちますが、問題が 1 つあります。所有しているフォント (C:WINDOWSFonts で表示できます) は訪問者が利用できない可能性があります。フォントに関する 2 つ目の問題は、一部のフォントがはキリル文字 (ロシア文字) でのみ使用でき、その逆もラテン文字 (英語文字) でのみ使用できます。もちろん、ラテン文字とキリル文字の両方に適した 3 番目のタイプもあります。 下のリストには、どのフォントが標準であり、すべてのコンピュータで利用でき、どの文字にも適合するかを示します。

• エリアル
• コズミック・サンズ
• 宅配便
• ガラモンド
• ヘルベチカ
• ヴェルダナ
• タホマ
• 回
• タイムズ ニュー ローマン

複数のフォントを同時に指定できます。 face="タホマ、タイムズ、ヴァーダナ"> 別のテキスト
このコードから次の点に注意してください: 訪問者がフォントを持っていない場合 タホマ、テキストはフォントで提供されます 回、Times がない場合、テキストは Times New Roman になります。 このフォントが存在しない場合は、ブラウザのデフォルトのフォントになります。

次にサイズに移りましょう。2 つのタグを使用して HTML のテキスト サイズを変更できます。 フォントおよび/または ベースフォント.
まずは始めましょう ベースフォント、このタグは、テキストの基本色、フォント、サイズを変更するために使用されます。例:
....文章....
このタグはコンテナではありません。つまり、 裏タグはありません。 テキストの色とフォントはタグにあるように設定されます フォントただし、テキストのサイズを変更するには属性が使用されます サイズ 1 ～ 7 の値を指定します。このタグはテキスト内で複数回使用できます。 サイズ="4">....テキスト....
サイズ="6">....テキスト....
サイズ="3">....テキスト....
デフォルトでは文字サイズ＝「3」となっており、このサイズは指定できません。 最初の例ではテキストを 1 つ増やし、2 行目では「6」に増やし、3 行目では再びデフォルトのテキストに戻しました。
さて、皆さんを失望させたいのですが、このタグはバージョン HTML-4.01 で導入されたため、ブラウザーでは Internet Explorer のみがサポートされており、他のブラウザーは単に無視されます。そのため、このタグはまったく使用しないほうが良いです。
そしてタグのみを使用してください SIZE属性付きのFONTほぼすべてのブラウザでサポートされています。 サイズ属性も1から7までの値をとりますが、これらのサイズは「-2」から「+4」まで指定することもできます
文章
文章
文章
文章
文章
文章
文章
FONT タグには、BASEFONT と同様に、いくつかの属性を含めることができます。
size="5" color="red" fase="タホマ、タイムズ、バーダナ">....テキスト....

この記事の読者および私のブログの購読者の皆様、こんにちは。 今日の出版物は、知識がなければインターネット リソースが読みにくく、魅力的ではないトピック「HTML でフォントを設定する方法」に専念したいと思います。 トピック自体は簡単なので、すぐにマスターできると思います。

ただし、Web 言語には、理想的には知っておく必要があるあらゆる種類のフォント デザイン ツールが豊富に含まれていることを忘れてはなりません。 この記事を読んだ後は、テキストの書式設定を自信を持ってマスターし、さまざまなスタイル、フォント スタイルの種類、装飾を設定する方法、および文と個々の文字のサイズと色を変更する方法を学ぶことができます。 始めましょう!

フォントが違う

看板、報道機関、文献、Web サイト、その他のサービスの大部分では、標準フォントが使用されています。 快適ではありますが、長い間退屈しており、目を引きません。 そのため、多くのデザイナーはデザインの種類を少し変更したり、まったく新しいスタイルを作成したりします。 最も有名で影響力のあるフォントは次のとおりです。

• ヘルベチカ。
• フューチュラ;
• ガラモンド。
• ボドーニ。
• ベンボ;
• ロックウェル。
• タイムズニューローマン。

両者の主な違いは、特定の家族との関係にあります。 セリフ (セリフ)、サンセリフ、装飾文字、斜体文字、等幅ファミリがあります。

フォント サイズが 5 種類あることも強調したいと思います。

HTML 言語とその「創造力」から始めましょう

名前 初めヘッダ

Pサブタイトルに赤文字！

ここにあります 初め段落 現在例。 わかりやすくするために これらの言葉斜体で表記されます。

属性について思い出させてください 整列 = "中心"中央に表示されるテキストを設定します。

そして今、CSSがそのスキルを披露する時が来ました

html によって提供されるさまざまなタグのセットにもかかわらず、css はフォントの外観をデザインするためのより便利で柔軟なツールです。

コンテンツのフォーマットに使用される主なプロパティは次のとおりです。 フォントとそのコンポーネント: テキスト装飾.

まずは見てみましょう フォント。 これ ユニバーサルパラメータ、そのおかげで、複数の値を同時に設定できます。 さらに、各パラメータは独自のキーワードで動作します。

プロパティ名	キーワード
フォントファミリー	標準フォント ファミリとしてインストールできます。 · セリフなし (サンセリフ)。 · アンティーク (セリフ); · 装飾的（ファンタジー）。 · イタリック体 (筆記体)。 ・等幅(モノスペース)、 標準的な既存のスタイル (Arial、Calibri など) も同様です。
フォントサイズ	シンボルの絶対サイズを設定するには、xx-small、x-small、small、medium、large、x-large、xx-large の表記が使用されます。 一意の値を指定することもできます。
フォントの太さ	テキストスタイルの彩度を担当します。 範囲の変更、または標準、太字、明るい、または太字という単語を使用して指定されます。
フォントバリアント	文字の表現を指定します。 キーワード: スモールキャップ、通常、または継承。
フォントスタイル	標準、斜体、斜体、または親を継承するように設定します。
フォントストレッチ	文字の濃さを表します。 指定できる値は、超圧縮、超拡張、超圧縮、超拡張、半圧縮、準拡張、標準、拡張、圧縮、継承です。

財産 テキスト装飾下線などの追加要素でテキストを装飾するのに役立ちます ( 下線)、取り消し線( ラインスルー)、上線( 上線)、また親のパラメータも継承します ( 継承する) またはすべての登録をキャンセルします ( なし).

今度は 2 番目の例です。 前のコードを取得し、CSS を使用してスタイルを設定しました。 そこで、タイトルを影で装飾しました（プロパティを使用） 文章-影) の周囲にアウトラインが付いている ( 国境-色）。 同時に一文字大きくしました。 パラメータも使いたかった 不透明度字幕の透明度を設定します。

名前 初めヘッダ

半透明の字幕！

ここにあります 初め段落 現在例。 わかりやすくするために これらの言葉斜体で表記されます。

または、HTML テキストをフォーマットするタグを研究してください

チュートリアルの重要かつ最も簡単なレッスンの 1 つを皆さんに紹介します。

• HTMLテキストほとんどのインターネット ページの主要コンポーネントです。
• キーフレーズ別 HTML ページのテキスト内ユーザーはあなたのサイトを見つけることができます。
• HTMLテキストあなたの裁量で任意のサイズと色にすることができます。 フォントの種類とそのボリュームを決定することもできます。
• HTMLのフォントサイズ通常はピクセル単位で設定されます。
• HTML テキストの書式設定広く使用されているため、書式設定タグが使用されます。

以下を参照してください HTML テキストをフォーマットするタグ:

• タグ →太字 HTMLテキスト(太字)。
• タグ → 太字 HTMLテキスト(太字)。
• タグ →等幅 HTMLテキスト(等幅フォント)。
• タグ →等幅 HTMLテキスト(等幅フォント)。
• タグ →等幅 HTMLテキスト(等幅フォント)。
• タグ → HTMLテキスト、通常のサイズより大きい（大きなフォント）。
• タグ → HTMLテキスト、通常よりサイズが小さくなります（フォントが小さくなります）。
• タグ →斜め HTMLテキスト(斜体フォント)。
• タグ →斜め HTMLテキスト(斜体フォント)。
• タグ →斜め HTMLテキスト(斜体フォント)。
• タグ →下線付き HTMLテキスト(下線付きのフォント)。
• タグ →取り消し線 HTMLテキスト(取り消し線フォント)。
• タグ → HTMLテキスト下付き文字の (フォント)。
• タグ → HTMLテキスト(フォント) を上付き文字にします。

HTML テキストの書式設定: 取り消し線、下線付きのテキスト

結果: ... 等幅フォント

結果: ...フォント サイズが通常より大きくなります

結果： ...斜体フォント

結果: 取り消し線テキスト (取り消し線フォント)

結果: 上付き文字

上記の書式設定テクニックは、テキストの小さなセクションにのみ使用してください。 使ってください CSSたとえば、ページ全体または複数の行に特定のフォントを設定したい場合。

標準のフォント サイズとスタイル (書体) を使用することに加えて、特別なタグを使用して各テキスト フラグメントのフォントを定義できます。 最も簡単な方法は、いわゆる 身体的なスタイル:

各物理スタイル タグには、スタイルのそれ以上の適用を無効にする、対応する終了タグがあります。 たとえば、タグの場合 終了タグは.
以下はサンプルプログラムです。 外観さまざまな身体的スタイル:

<НЕАD><ТIТLЕ>身体的なスタイル

<В>大胆な
イタリック体
ストレスがたまった
バツ印付き
<ТТ>タイプライター
<ВХ1>太字斜体
<ВХ1><и>太字斜体下線付き

米。 649. 身体的なスタイル

タイトルタグ内に物理スタイルタグを挿入して、タイトル全体またはその一部のみを変更できます。 たとえば、見出しとして定義されたテキストの一部を斜体にするには、次の構造を使用できます。

<НЕАD><ТIТLЕ>物理的および論理的スタイル

<Н2>これ - 修正された第 2 レベルのヘッダー

米。 650. タイトルの一部のフォントスタイルを変更する

を使用することで 特別なタグ テキスト画像のフォントをカスタマイズできます。書体、サイズ、色を設定します。 まず、ドキュメント内でデフォルトで使用されるメイン フォントのサイズを設定できます。 メインのフォントタグの形式は次のとおりです。 。 メイン フォント サイズは 1 ～ 7 に設定できます。このタグを使用しない場合、デフォルトのメイン フォント サイズは 3 に設定されます。
タグ 個々のテキスト断片の現在のフォント サイズを設定します。 このタグはスタイルには影響しません。 可能な値の範囲は 1 ～ 7 です。このタグを使用すると、メイン フォントに対する現在のフォントのサイズを制御することもできます。 これを行うには、+ 記号 (増加する場合) と - 記号 (減少する場合) を使用して、フォント サイズを指定された量だけ変更します。 たとえば、本文のフォント サイズが 3 に設定されている場合、タグ 現在のフォント サイズを 5 に設定します。
フォントの書体を設定するには、タグを使用します 。 例えば：

このタグがドキュメント内で使用されていない場合、ブラウザは環境設定で設定されたフォントを使用します。 したがって、ユーザーの画面上のテキストは、想像とはまったく異なるものになる可能性があります。 指定したフォントがユーザーのコンピュータにインストールされていない場合、ブラウザではデフォルトのフォントでテキストが表示されることにも注意してください。
タグでできます カンマで区切られたフォントのリストを示します。 この場合、ブラウザは最初に見つかったフォントを使用します。 たとえば、次のようにタグを書くことができます。

FACE="Arial、サンセリフ、クーリエ">

通常、類似したフォントがリストで指定されます。 最も一般的なフォントを割り当てることをお勧めします。 ページ上にテキスト情報を配置する場合は、フォント名をまったく割り当てず、ブラウザの標準設定に依存することをお勧めします。 ただし、ページをデザインするときは、標準のブラウザ設定を使用して、テキストの認識とユーザーの認識を同期させる必要があります。 結局のところ、あなたは自分自身のためではなく、読者のためにページを作成しているのです。
タグでの COLOR 属性の使用 フォントの色を設定できます。

COLOR 属性引数は、カラー コード (赤、緑、青のコンポーネント、別名 RGB コンポーネント) の 16 進表現です。

<НЕАD><ТIТLЕ>次のプログラムはフォント管理を示しています。

<Р>フォントのインストール アリアフォント
<Р>アブグデジク クーリエフォント
<Р>アブグデジク クーリエフォント

フォント記号

米。 651. 異なるフォントの使用 タグ内にあることに注意してください

可能な属性の一部またはすべてを使用できます。 例えば： で数式 、脚注と同様に、本文とは位置（少し高いか低い）とサイズが異なる索引がよく使用されます。 タグはこの目的に役立ちます そして

<НЕАD><Т1ТLЕ>それぞれ上位インデックスと下位インデックスに対応します。インデックス

<НЗ>/頭>
<Р>インデックスの使用例 ²)^(5+x

x+3 ₁ある ₂+α ₃
<Р>+α ²

脚注

上記で説明したものに加えて、追加のテキスト書式設定タグがあります。

• - 電子メールアドレスの割り当て、 住所そして
  電話番号。
• <СIТЕ> - 引用符を強調表示する。
• , - プログラムテキスト、記号定数の記録。
• - キーボードからテキストを入力します。

最後の 3 つのスタイルは等幅フォント (通常は Courier) を使用します。
たとえば、等幅フォントの文字 I と Ж は同じスペースを占めます。 等幅フォントを使用するのは、スペース文字を使用するとテキストを簡単に位置合わせできるためです。もう 1 点注意してください。 フォント コントロール タグには、論理スタイル タグと同様に、次の属性を含めることができます。 TITLE= "文字列"を使用すると、このタグ内のテキストにツールチップを添付できます。

属性引数

タイトル

この記事を共有します:
ヒント文字列です。 ハイライト表示された単語または語句の上にマウスを置くと、ポインタの横にツールヒントが表示されます。 この手法を使用すると、略語を解読し、追加の説明や推奨事項をユーザーに提供できます。

この記事を共有します:
関連記事

この記事を共有します:
Windows 用の無料プログラムを無料でダウンロード Google Earth アプリケーションをダウンロード

この記事を共有します:
2015 年 4 月 17 日