Javascriptフォントファミリーリスト

circle | exp | find | JavaScript | open | sep | sin

Michael Zippo

Webページのテキストのフォーマットは、Webデザインの重要な部分です。たとえば、ヘッダーを特定のフォントで表示したり、ページ上のすべてのテキストで serifフォントを使用したりすることができます。

ここでCSSを使用します。フォントが見つかりました：家族が登場します。 CSS font-familyプロパティを使用すると、ページWeb上のテキストのスタイルを設定するために使用される1つ以上のフォントファミリを指定できます。

このチュートリアルでは、CSSの例を参照して基本を説明します。 font-familyと、プロパティを使用してWebページのテキストのスタイルを設定する方法。

CSSフォントファミリー

CSSでのフォントのスタイル設定には、さまざまな側面があります。色の設定からサイズまで。警察。ただし、フォントスタイルの最も重要な部分の1つは、フォントファミリを定義することです。これは、Webページのテキストで使用されるスタイルです。

Webページでは、font-familyプロパティを使用できます。 font-familyプロパティの構文は次のとおりです。

font-familyプロパティは、単一のフォントまたはフォントのリストを受け入れます。複数の文字を指定する場合は、各文字をコンマで区切る必要があります。

文字が表示される順序は、ブラウザが文字を適用しようとする順序です。ブラウザは、デフォルトで、インストールされているか、Webブラウザからダウンロードできるリストの最初のフォントになります。この文字が使用できない場合は、2番目の文字が使用されます。

ですfont-familyプロパティは、テキストブロック内の各文字のフォントを選択することに注意してください。次に、特定の文字がフォントで使用できない場合、適切な文字が見つかるまで、ファミリリスト内のフォントの次のフォントが試されます。

font-weightを使用する場合は、少なくとも1つの姓の汎用フォント（serif、sans-serif、monospaceなど）を含めるのが最適です。これにより、リスト内の別のフォントが使用できない場合でも、ブラウザは表示するWebページ上のテキストのフォントを選択できます。

使用できる方法は2つあります。 font-familyプロパティ。まず、プロパティを使用して、Webページのカスタムフォントを指定できます。次に、このプロパティを使用して、一般的なフォントファミリをWebページのテキストに適用できます。 font-familyプロパティで使用できる一般的なフォントファミリは次のとおりです。

• serif：フォントはserifフォントを使用します（例：Lucida Bright、Palladio）。
• sans-serif：フォントはsans-serifフォントを使用します（例：Open Sans、Trebuchet MS）。
• モノスペース：文字はすべて同じ幅です（例：minivan、Menlo）。
• italic：文字にはハイフンが付いています（例：Lucida Calligraphy）。
• ファンタジー：フォントに注意を引くために使用される装飾フォント（例：Papyrus）。

あります。利用可能な他の一般的なフォントファミリ。詳細については、 MozillaCSSフォントファミリーのドキュメント。

font-familyプロパティの基本がわかったので、実際にどのように機能するかの例をいくつか見てみましょう。 。

CSSフォントファミリの例

地元のスタンプから、クラブのシアトルスタンプクラブに、の一部のフォントをカスタマイズするように依頼されました。彼らのウェブサイト。

まず、「連絡先」ページのすべての

ヘッダーのフォントを、「OpenSans」を使用するように変更するように求められました。フォント。したがって、たとえば、彼らのWebサイトの「お問い合わせ」ページの「お問い合わせ」はOpenSansに表示されます。このフォントが使用できない場合は、一般的な「sans-serif」ファミリを使用する必要があります。これを行うには、次のコードを使用できます。

クリック" noscript> 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。

HTMLコードでは、

タグを使用してヘッダーを指定しました。このタグにはお問い合わせというテキストが含まれています。したがって、CSSコードではWebページの

要素のフォントを設定するフォントファミリ。

プロパティfont-familyに割り当てた値は、のすべての

要素のフォントを設定します。 Sans を開き、このフォントが使用できない場合は、一般的な sans-serif ファミリが使用されます。これを実現するために、コンマで区切って2文字を指定しました。

ここで、タイムズフォントを使用するために、スタンプクラブのページ連絡先のすべての文字

要素にスタイルを適用するとします。このフォントが使用できない場合は、デフォルトのserifフォントを使用する必要があります。これを行うには、次のコードを使用できます。

クリック 上記のコードエディタで、HTML/CSSコードの出力を確認します。

この例では、

タグを使用してテキストの段落を宣言しました。次に、 Timesとタグのフォントファミリを定義します。 > serif フォント。デフォルトでは、ブラウザはすべての

タグを Times フォントで表示しようとします。このフォントが使用できない場合は、 serif フォントが使用されます。