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'、筆記体; } |
>>: iframeを使用してページを呼び出すとページがキャッシュされるかどうかの簡単な分析
推薦する
光るテキストとちょっとしたJS特殊効果を実現するCSS
実装のアイデア: CSSでtext-shadowを使用してテキストの光る効果を実現します効果画像: ...
MySQL 8.0.21 のインストールと設定方法のグラフィックチュートリアル
MySQL 8.0.21のインストールと設定方法を記録してみんなで共有します。 1. ダウンロード1...
HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)
この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...
Apache ソースコードのインストールと仮想ホストの設定に関する詳細なチュートリアル
ソースからApacheをインストールする1. Apacheソースコードをアップロードして必要なソフト...
MySQLデータのグループ化の詳細な説明
グループを作成グループ化は、SELECT ステートメントの GROUP BY 句で設定されます。例：...
ページングクリックコントロールを実装するネイティブJS
これは、ネイティブJSを使用してページングクリックコントロールを実装する必要がある面接の質問です。参...
Dockerコマンドの自動補完の実装
序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...
JavaScript でプロトタイプ パターンを実装する方法
概要プロトタイプ パターンは、プロトタイプ インスタンスによって作成されるオブジェクトの型を指し、こ...
MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装
MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...
Vue テンプレートのコンパイルの詳細
目次1. 解析する1.1 傍受のルール1.2 傍受プロセス部分1.3 パーサーの概要2. 最適化する...
テキストの両側に水平線を描くための CSS のサンプルコード
この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...
MySQL無料インストールバージョンの設定チュートリアル
この記事では、参考までにMySQLの無料インストール構成チュートリアルを紹介します。具体的な内容は次...
Nginx で Angular プロジェクトを展開する際の落とし穴
コンパイル後にAngularプロジェクトをNginxにデプロイする方法をオンラインで検索すると、ほと...
上下に空白行があるフォームを挿入する解決策
ウェブページを作成するときに、フォームを挿入した後、フォームの上下に空白行が表示されることがよくあり...
テキストの折り畳み特殊効果を実現する HTML+CSS の例
この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し...