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を使用してページを呼び出すとページがキャッシュされるかどうかの簡単な分析

推薦する

CentOS7 64 ビットでの MySQL 5.7 のインストールと設定のチュートリアル

インストール環境: CentOS7 64ビットMINI版、MySQL5.7をインストール1. YUM...

VUE のコンパイル スコープとスロット スコープのスロットの問題について

スロットとは何ですか?スロット ディレクティブは v-slot であり、現在 slot と slot...

MySQL 1130例外、リモートログインできない解決策

目次質問: 1. リモートログイン権限を有効にする: 2. MySQLの権限を更新します。 3. テ...

CSS ウェイト値(カスケード)の例の詳細な説明

•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? ...

Vueはmockjsを使用してシミュレートされたデータケースの詳細を生成します

目次プロジェクトにmockjsをインストールするVueプロジェクトでmockjsを使用する基本的なプ...

nginxでの共有メモリの使用に関する詳細な説明

nginx プロセス モデルでは、トラフィック統計、トラフィック制御、データ共有などのタスクを完了す...

JavaScriptの知識ポイントの詳しい説明

目次1. JavaScriptの基礎2. 基本的なJavaScript構文3. JavaScript...

Ubuntu で FTP サーバーを構築する方法の詳細な説明 (成功保証)

1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...

Ubuntu20のtzselect設定時間失敗問題、Raspberry Piサーバ(推奨)

2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...

ブラウザ(IEシリーズ)を判別するための条件付きコメント

<!--[if IE 6]> IE6 のみが認識可能 <![endif]-->...

PostgreSQL正規表現の一般的な機能の概要

PostgreSQL正規表現の一般的な機能の概要正規表現は、複雑なデータ処理を必要とするプログラムに...

MySQL データベース データのロード 複数の用途

目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...

ハードコーディングに別れを告げ、フロントエンドテーブルがインスタンスコードを自動的に計算できるようにします。

序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...

VMWare Linux MySQL 5.7.13 のインストールと設定のチュートリアル

この記事では、参考までにVMWare LinuxにMySQL 5.7.13をインストールするチュート...

開発環境にUbuntu 16をインストール後の初期設定

オフィスでは、Linux 開発環境として Ubuntu システムが必要です。現在、Ubuntu 16...