CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSフォントファミリー

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

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

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

CSSフォントファミリー

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

Webページのテキストで使用されるフォントファミリを設定するには、font-familyプロパティを使用できます。 font-familyプロパティの構文は次のとおりです。

font-family: fontFamilyOne, fontFamilyTwo, …;

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

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

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

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

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

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

  • セリフ：キャラクターはセリフ書体を使用します（例：Lucida Bright、Palladio）。
  • sans-serif：キャラクターはsans-serif書体を使用します（例：Open Sans、Trebuchet MS）。
  • モノスペース：文字はすべて同じ幅です（例：モノスペース、メンロ）。
  • 筆記体：キャラクターには結合ストロークがあります（例：Lucida Calligraphy）。
  • ファンタジー：キャラクター（パピルスなど）に注意を引くために使用される装飾フォント。

利用可能な他の汎用フォントファミリがあります。これらについては、MozillaCSSフォントファミリのドキュメントで詳しく読むことができます。

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

CSSフォントファミリの例

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

まず、「Contact」ページのすべての

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

<html>

<h1>Contact Us</h1>

<style>

h1 {
	font-family: "Open Sans", sans-serif;
}

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

HTMLコードでは、Contact Usというテキストを含む

タグを使用して見出しを指定しています。 。次に、CSSコードで、font-familyを使用して、Webページの

要素のフォントを定義しました。

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

要素のフォントをOpen Sansに設定します。 、およびそのフォントが使用できない場合は、一般的なsans-serif 家族が使用されます。これを実現するために、コンマで区切って2つのフォントを指定しました。

ここで、スタンプクラブのContactのすべての

要素のスタイルも設定したいとします。 Timesフォントを使用するページ。そのフォントが使用できない場合は、デフォルトのセリフフォントを使用する必要があります。このタスクを実行するには、次のコードを使用できます。

<html>

<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>

<style>

p {
	font-family: "Times", serif;
}

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

この例では、

タグを使用してテキストの段落を宣言しました。次に、CSSスタイルシートのすべての

タグのフォントファミリを設定して、Timesを使用します。 およびserif フォント。デフォルトでは、ブラウザはTimes内のすべての

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

結論

CSS font-familyプロパティを使用すると、Webページ上のテキストのスタイルを指定できます。たとえば、font-familyプロパティを使用して、「Arial」フォント、またはWebページ上のすべてのテキストに「筆記体」の汎用フォントを使用できます。

このチュートリアルでは、例を参照して、CSS font-familyプロパティの基本と、それを使用してWebページのテキストのスタイルを設定する方法について説明しました。これで、マスターWebデザイナーのようにfont-familyプロパティの使用を開始する準備が整いました。


  1. CSSのフォントファミリー

    CSS font-familyプロパティは、選択した要素に特定のフォントを設定するために使用されます。クロスブラウザの互換性を確保するために、追加のフォントを指定してWebセーフフォントを使用することをお勧めします。 構文 CSS font-familyプロパティの構文は次のとおりです＆mins; Selector {    font-family: /*value*/ } 次の例は、CSSフォントファミリプロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> h2

  2. CSSのフォントプロパティ

    CSSフォントのプロパティを使用すると、テキストの外観を変更できます。次のプロパティは、テキストのスタイル設定に役立ちます。 フォントファミリー このプロパティは、要素のフォント面を設定するために使用されます。 フォントカーニング 文字間隔を均一にし、読みやすさを向上させるために、フォントカーニングプロパティが使用されます。ただし、このプロパティはフォント固有です。 フォントサイズ font-sizeプロパティは、フォントのサイズを設定します。 フォントストレッチ 一部のフォントには、凝縮、太字などの追加の面があります。font-stretchプロパティは、これらを指定