この記事では、FontsInというシンプルで重要なトピックを紹介します。 また、このテーマに関する実践的なデモンストレーションも行います。この記事では、次のポイントについて説明します。
Webサイトは、画像、音声、ビデオ、およびテキストコンテンツの形式でコンテンツを配信します。ただし、ほとんどのWebページは、依然として主要な形式としてテキストに依存しています。これは、プレーンテキストにはいくつかの非常に重要な利点があるためです。
邪魔にならない読みやすさ–オフィスにいる間に最新の一致スコアを確認したい。明らかに、ノイズの多いビデオではなく、テキストをすばやく更新する必要があります。
ネットワーク帯域幅の要件が低い–インターネット接続が不十分なエリアでもテキストコンテンツをロードできますが、リッチメディアではロードできません。
検索に適した– Webサイトは、コンテンツが検索エンジンでどれだけ簡単に注目されるかを常に監視しています。少なくともAIが完全にインターネットを引き継ぐまでは、テキストがこれに最も適しています。
テキストコンテンツをフォーマットする際、Webデザイナーは、フォント、配置、強調表示、色など、作業するパラメーターがほとんどありません。テキストに適切なフォントを選択することは重要な選択です。標準的な方法は、CSSフォントタグを使用してHTMLページのテキストのフォントを定義することです。
HTMLプログラミングの世界に慣れていない場合は、ここで基本的なスターターツアーに参加してください。 CSSフォントについて学ぶ前に、CSSの基本を読んでおくことをお勧めします。
包括的なCSSチュートリアルについては、初心者向けのEdurekaCSSチュートリアルにアクセスしてください。 CSSを使用してHTMLWebデザインを拡張する方法についての優れた注意事項が得られます。
apachehadoopのcloudera認定管理者
CSSのフォントに関するこの記事に進む
CSSのフォント
フォントは基本的に、テキストの表示に関連する一連の特性です。フォントは、サイズ、インデント、幅、傾斜などによって互いに区別されます。さまざまなフォントでの基本的なテキスト表示から始めましょう。
例1：さまざまなフォントの見出しと段落
body {background-color：lightblue} h1 {font：bold 30px arial、sans-serif} h2 {font：15px verdana} p {font：italic bold 12px / 30px Georgia、serif}イタリック体の太字のGeorgiaフォントの段落
例1：出力
例1では、異なるフォントの3行のテキストがあります。各フォントの文字幅、インデントなどが異なることに気付くでしょう。
CSSのフォントに関するこの記事に進む
CSSフォントの属性
CSSフォントには、スタイル、太さ、サイズ、ファミリの4つの主要な属性があります。 style属性は、通常または斜体を示します。太さは、フォントをプレーンまたは太字で示します。重量は数値で表すこともできます。サイズは、フォントサイズが大きいほど、テキストの外観が大きくなります。フォントサイズを割り当てる方法は複数あります。詳細については、後のセクションで説明します。ファミリ属性は、フォント名をテキストに割り当てることです。
例1では、見出しと段落に異なるフォント名を使用しています。 h1タグとpタグの下には、2つのフォント名がリストされていますが、h2タグは1つのフォントのみを示しています。これはフォントファミリの定義です。これについては後で詳しく説明します。
フォントスタイル属性：
設定できる2つの主要なスタイルは、「通常」と「イタリック」です。イタリックは、傾斜のある筆記体であると想定されています。法線はストレートのデフォルトオプションです。 「oblique」と呼ばれるあまり使用されていないオプションがもう1つあります。これは、ほとんどのフォントの斜体オプションに似ています。スタイルを「継承」に設定して、親要素からフォントスタイルを取得することもできます。
| 例2：フォントスタイルオプション | |
| font-family：verdana フォントスタイル：通常 フォントサイズ：15 | Verdanaの通常のフォント |
| font-family：verdana フォントスタイル：斜体 フォントサイズ：15 | Verdanaイタリックフォント |
| font-family：verdana フォントスタイル：斜体 フォントサイズ：15 | Verdana斜体フォント |
font-weight属性：
この属性は、フォントを太く表示するか薄く表示するかを決定します。 「通常」または「太字」に設定できます。デフォルト値は正常です。この値は数値として設定することもできます。 400の重みは通常を表し、700は太字を表します。他の設定はほとんどありませんが（100 –非常に明るいから900 –非常に太字の範囲）、すべてのフォントでサポートされているわけではありません。すべての重みオプションを例3に示します。
| 例3：フォントの太さのオプション | |
| font-family：verdana フォントの太さ：通常 フォントサイズ：15 | ヴェルダナの通常の体重 |
| font-family：verdana フォントの太さ：太字 フォントサイズ：15 | Verdanaの大胆な重み |
| font-family：verdana フォントの太さ：500 フォントサイズ：15 | Verdanaの数値の重み |
font-size属性：
サイズ属性は複数の方法で設定できます。以下にこれらの方法をリストアップしましょう。
●「中」、「大」などの列挙値。実際、衣類のサイズと同じように、値はXXSmallからXXLargeの範囲になります。
●親要素を基準にして、「大きい」または「小さい」として設定します。
●親要素のサイズのパーセンテージ。
●親要素のサイズを直接採用するには、「継承」として設定します。
●px（ピクセル）、pt（ポイント）、またはcm（センチメートル）の単位での絶対値として
「中」は、このパラメータに設定されているデフォルト値です。
c ++名前空間の例
font-family属性：
HTMLでは、CSSフォントファミリーはフォント名を設定するためのものです。タグを使用して単一のフォント名を入力することもできます。または、ブラウザがフォントを選択する優先度を定義するフォントファミリリストとして複数の値を割り当てることができます。
リストは、フォールバックシステムの形式で、左から右に優先順位が付けられます。リストの最後に到達するまで、使用可能な場合は最初の値が選択されるか、制御が次の値に進みます。デフォルトのフォントファミリーは、ブラウザの設定によって定義されます。
CSSフォントファミリには、汎用ファミリとフォントファミリの2種類があります。
●一般的なファミリ–いくつかの一般的な特性に基づいて、フォントは「セリフ」、「サンセリフ」、「モノスペース」などとしてグループ化されます。たとえば、サンセリフはセリフスタイルのないフォントを意味します。
●姓–特定の家族階層に属するフォント。 Times、Arial、Courierはすべてフォントファミリであり、Times NewRomanはTimesファミリのフォントの例です。
さまざまなフォントファミリの使用オプションを以下の例4に示します。
| 例4：フォントファミリーオプション | |
| font-family：verdana | Verdanaシングルフォント |
| font-family：“ Times New Roman”、Times、Courier | Times NewRomanとそれに続くフォントファミリー |
| font-family：Arial、minivan、sans-serif | Arialとそれに続くジェネリックファミリー |
注意すべきいくつかの一般的なポイント
●他のいくつかのCSSプロパティと同様に、一部のフォント設定はブラウザによって異なります。まれなフォント設定を使用する前に、ブラウザのサポートを確認してください。
●font-style、font-weightなどの個々のタグを使用して、フォント設定を個別に設定できます。または、コンパクトコードが必要な場合は、すべての値を同じ行に含む短縮フォント属性を使用できます。
●ブラウザのサイズに応じてフォントのサイズを変更したいユーザーシナリオでは、レスポンシブフォント設定と呼ばれる便利なフォントサイズ設定があります。 「ビューポート幅」を意味するvw単位で設定できます。そうすれば、テキストサイズはブラウザウィンドウのサイズに従います。
あなたが探していた情報がCSSのフォントで見つけられたことを願っています。以下のコメントセクションであなたの経験を私たちと共有してください。ハッピーデザイン！
ウェブ開発について詳しく知りたい場合は、 Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なウェブサイトを作成し、Amazon Simple Storage Service（S3）にデプロイする方法を学ぶのに役立ちます。