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

フォントHTMLの変更：ハウツーガイド

font-family CSSルールを使用すると、HTMLWebドキュメントのフォントを定義できます。外部フォントを参照するには、url（）メソッドを使用してフォント面を定義できます。または、GoogleFontsなどのサイトからフォントCSSファイルを埋め込むことができます。

開発者として、HTMLの処理時に入力されるデフォルトのフォントを使用したくない場合があります。この記事の目的は、ベストプラクティスを使用してHTMLドキュメントのフォントを変更する方法を示すことです。

HTMLでフォントを変更する方法

HTMLでWebページのフォントを変更する方法は3つあります。

  • 組み込みフォントをfont-familyルールで使用する。
  • font-faceルールを使用して外部フォントを参照します。
  • 外部CSSスタイルシートを使用してWebページのフォントのスタイルを設定します。

この記事では、フォントを変更するこれらの各方法について説明します。

HTMLフォントの変更：組み込みのフォントファミリ

フォントを変更する最初の方法は、インラインスタイルでfont-familyプロパティを使用することです。これは次のように行うことができます：

<p style="font-family:wingdings;" id="wingdings">New York</p>

font-familyを使用するだけです テキストのブロックで使用するフォントを示すプロパティ。標準フォントの多くはすぐに使用できます。

最初のフォント選択をロードできない場合に備えて、バックアップフォントを用意することをお勧めします。カンマと新しいフォントファミリ名を追加するのと同じくらい簡単です。最初の2つが利用できないという1つのエッジケースでも、私は常に一般的なグループ化で終わります。

<p style="font-family: Roboto, Lato, sans-serif" 
id="roboto-plus-backups">New York</p>

最後の一般的なグループ化は、クライアントが使用しているデバイスのデフォルトのsans-serifフォントです。私たちが利用できる一般的な家系の名前：モノスペース 、セリフ 、サンセリフ 、筆記体 、およびファンタジー 。 TimesNewRomanなどの特定のフォントにアクセスすることもできます。

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

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

HTMLフォントの変更：フォント面の使用

font-faceルールを使用して、外部ソースからWebページにフォントをインポートできます。

このアプローチを使用するには、外部フォントドキュメントにアクセスできる必要があります。フォントドキュメントの拡張子は通常「.ttf」です。

font-face属性を使用してフォントを変更する方法を見てみましょう。使用する必要のあるCSSスタイルルールは次のとおりです。

@font-face {
	font-family: "Open Sans";
	src: url(yoururl);
}

font-face style属性を使用して、新しいフォントを宣言します。 font-family属性は、新しいフォントの名前を定義します。 src：url（）は、CSSドキュメントにフォントの場所を指示します。 「yoururl」の値は、テキストフォントのURLである必要があります。

私たちのフォントはまだ私たちのウェブページを変更しません。新しいフォントを使用する要素をCSSスタイルシートに指示する必要があります：

h1, h2, h3 {
	font-family: "Open Sans";
}

このコードは、CSSスタイルシートに「OpenSans」フォントをWebページの一部の要素に適用するように指示します。 h1、h2、h3は、リストされた要素にスタイルを適用するCSSセレクターです。これらの要素はHTMLの見出しです。

フォントHTMLの変更：外部CSSフォント

Google Fontsなどの一部のサイトでは、CSSスタイルシートを使用してサイトにフォントを埋め込むことができます。これらのスタイルを使用すると、CSS属性を使用してフォントタイプを定義できます。この例では、GoogleFontsの「Bangers」フォントと「Yellowtail」フォントを使用してみます。

<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p>
<p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>

選択したIDEで上記のコードを実行してロードすると、デフォルトで汎用フォントになります。これらのフォントを使用したい場合は、数回クリックするだけで使用できます：

  1. GoogleFontsにアクセスしてください。
  2. 必要に応じて、時間をかけてサイトを試してみてください。ここにはフォントのオプションがたくさんあります。サンプルテキストは好きなようにカスタマイズできます。 Webページの上部に、必要な情報を入力するための入力があります。
  3. 「ブリ」を検索してクリックします。フォントに関する詳細情報が表示された画面が表示されます。 「+このスタイルを選択」を探します 」ボタンをクリックしてクリックします。
  4. サイドバーの引き出しには、選択に関する情報が表示されているはずです。他のフォントを閲覧している間は開いたままになります。 フォントの参照をクリックします 画面上部にリンクして、「Bangers」を検索します。 「イエローテール」の場合と同じプロセスを実行します。
  5. サイドバーに、[埋め込み]のタブが表示されます。それをクリックします。
  6. オプションはすでに強調表示されているはずです。 をコピーして貼り付けます HTMLの先頭に挿入します。
  7. CSSで各フォントを使用する方法について記載されているガイドラインに従ってください。推奨されるバックアップフォントも提供します。
  8. 以上です！これらのフォントをドキュメントで使用する準備が整いました。
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet">
 
 </head>
 <body>
   <p id="courier">New York</p>
   <p id="roboto">New York</p>
   <p id="raleway" style="font-family: Raleway, sans-serif">New York</p>
   <p id="serif" style="font-family: Courier New">New York</p>
   <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p>
   <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p>
   <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
   <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p>
 </body>
</html>

上記の作業デモは、使用されている組み込みフォントとサードパーティフォントの両方を示しています。他のフォントをインポートしてみてください！

結論

font-family属性を使用するか、カスタムフォントを含む外部CSSスタイルシートを使用して、HTMLフォントを変更できます。サイトのCSSにカスタムフォントを埋め込むには、font-faceルールを使用できます。

HTMLでのコーディングについてもっと知りたいですか？ HTMLの学習方法ガイドをお読みください。このガイドでは、HTMLを学習するためのヒントと、最高のオンラインコースに関するガイダンスを紹介しています。


  1. HTML<font>タグ

    HTMLのタグは、フォントの色、フォントファミリ、およびフォントサイズを設定するために使用されます。以下は属性です- 色： フォントの色を設定します。 顔： フォント面、つまりファミリを設定します。 サイズ ：フォントサイズを設定します 注 −タグはHTML5ではサポートされていません。 ここで、HTMLでタグを実装する例を見てみましょう- 例 <!DOCTYPE html> <html> <body>    <h2>Playing with Fonts</h2>    <p&

  2. HTMLDOMスタイルのフォントプロパティ

    HTML DOM Style fontプロパティは、font-style、font-variant、font-weight、font-size、line-height、およびfont-familyという名前の6つのプロパティを設定または取得するために使用されます。フォントサイズとフォントファミリは必須の属性値であり、他のすべての欠落している値のデフォルトを設定できます。 フォントプロパティを返すための構文は次のとおりです- object.style.font フォントプロパティの設定- 値 説明 スタイル フォントスタイルの設定。 バリアント スモール