Google Web Fonts でウェブサイトに無制限のフォントを追加

Google Web Fonts でウェブサイトに無制限のフォントを追加

長い間、リソースの制約により、使用できるフォントが限られていたため、Web サイトの開発は妨げられていました。しかし、現在 Google は新しい Web サービス「Google Web Fonts」を開始しました。このサービスを使用すると、Web サイトで Google のさまざまなフォントを使用できるようになります。使用するフォントに制限はありません。

以下に、いくつかの手順でそれを実行する方法を簡単に説明します。

フォントを選択

これを行うには、Google http://www.google.com/webfonts を開いて、好きなフォントを選択します。

選擇谷歌字體

選択したフォントコードを取得する

この例では、「Eater」フォントが使用されます。フォント コードを取得するには、開いているページで次の操作を行う必要があります。

代碼谷歌字體

次に、HTML での検証エラーを回避するために、「/」タグを追加する必要があります。したがって、次のようになります。

コードをコピー
コードは次のとおりです。

<link href='http://fonts.googleapis.com/css?family=Eater' rel='スタイルシート' type='text/css' />

上記のコードをコピーし、次のように <HEAD> タグの後に配置します。

コードをコピー
コードは次のとおりです。

<ヘッド>
<link href='http://fonts.googleapis.com/css?family=Eater' rel='スタイルシート' type='text/css'/>
...
<!-- その他の HTML コード -->
...

ウェブページにCSSコードを追加する

これで、CSS でプロパティ「font-family」を設定することで、このフォントを使用できるようになります。たとえば、第 1 レベルの見出しすべてに同じフォントを使用する場合は、次の CSS スタイルを追加する必要があります。

コードをコピー
コードは次のとおりです。

h1
{
フォントファミリー: 'Eater'、筆記体;
}

<<:  JS ES 新機能テンプレート文字列

>>:  iframeを使用してページを呼び出すとページがキャッシュされるかどうかの簡単な分析

推薦する

Nginx サービス クイック スタート チュートリアル

目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...

HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。

<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...

Mysqlデータテーブルでワームレプリケーションを使用する方法

簡単に言えば、MySQL ワーム レプリケーションは、クエリされたデータを指定されたデータ テーブル...

MySQL の時間タイプとモードの詳細

目次1. MySQL の時刻型2. タイムゾーンを確認する3. 不正な時間値4. 厳密モード5. 事...

inline-blockプロパティとの互換性

<br />1年前、インターネット上にはinline-blockプロパティに関する記事は...

MySQL 8.0.11 圧縮版のインストールチュートリアル

この記事では、MySQL 8.0.11のインストールチュートリアルを参考までに紹介します。具体的な内...

CSS3を使用してトランジションとアニメーション効果を実現する

JS アニメーションの代わりに CSS アニメーションを使用する必要があるのはなぜですか? Java...

1 つの記事で Node.js の非同期プログラミングを学ぶ

目次 はじめに 同期 非同期とブロッキング JavaScript のノンブロッキング コールバック ...

MySQLで行を列に変換する方法

MySQL の行から列への操作いわゆる行から列への操作は、テーブルの行情報を列情報に変換することです...

img usemap 属性 中国地図リンク

HTML img タグ: Web ページに導入される画像を定義します。興味深い usemap 属性も...

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...

Vue Element フロントエンドアプリケーション開発のための従来の JS 処理機能

目次1. 従来のコレクションに対するフィルター、マップ、および削減処理方法2. 再帰処理3. for...

MySQL で指定エンコーディングを実装する際の落とし穴について

前面に書かれた環境: MySQL 5.7+、MySQL データベースの文字エンコードは utf8、テ...

Pycharmとsshリモートアクセスサーバーdockerの詳細なチュートリアル

背景: 一部の実験はサーバー上で完了する必要があります。したがって、リモート サーバー上のコードをロ...

CSS マージンの重複とその防止方法

2 つ以上のブロックレベル ボックスの垂直に隣接するエッジが重なり合っています。結果として得られる境...