ウェブページで任意のフォントを使用する実践的な操作とデモ

ウェブページで任意のフォントを使用する実践的な操作とデモ

以前、「Web ページにシステムに組み込まれていないフォントを埋め込む」という研究をしたことがありました。技術的には可能ですが、中国語のフォント ファイルは少なくとも 20M 以上あり、各ブラウザーでサポートされているフォント ファイルが異なるため、中国では実用的な意味はあまりありません。つまり、各ブラウザーに対応するには、サーバー側に 2 ~ 3 種類の異なる形式のフォント ファイルが必要です。以下の対応する画像をご覧ください。

以前行ったこの小さな研究は将来の仕事には役立たないだろうと思っていましたが、役に立つことがわかりました。顧客から時刻の表示を要求されましたが、時刻のフォントは図に示すようにデジタル時計と同じである必要があります。

まず、このフォントを見つける必要があります。このフォントは ttf 形式のみなので、他のさまざまな形式に変換する必要があります。変換方法については、ソフトウェアとオンラインがあります。ここではどちらを使用するかは指定しません。

変換後、CSSコードを記述できます

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

@フォントフェイス {
font-family: 'hooray'; /*カスタムフォントに名前を付ける*/
src: url('http://demo.jb51.net/js/2013/webfontry/hooray.eot');
ソース: url('http://demo.jb51.net/js/2013/webfontry/hooray.eot?#iefix') フォーマット('eot'),
url('http://demo.jb51.net/js/2013/webfontry/hooray.woff') フォーマット('woff'),
url('http://demo.jb51.net/js/2013/webfontry/hooray.ttf') フォーマット('truetype'),
url('http://demo.jb51.net/js/2013/webfontry/hooray.svg#webfontjKg17VrE') フォーマット('svg');
}

呼び出しに関しては、通常どおり、必要な場所に font-family を定義し、フォント名は先ほど指定した名前になります。

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

フォントファミリー: 'hooray';

完全なデモをダウンロードしてください。オンラインデモ

記事では多くの理由を説明しませんでした。なぜなら、インターネット上には「Web ページで任意のフォントを使用する」ことに関する情報はたくさんあるものの、例はほとんどないからです。わからないことがあれば、Baidu や Google で検索すればわかります。

付録 1: 2 つの新しいオンライン フォント変換 Web サイト (FontsQuirrel と onlinefontconverter) が追加されました。

<<:  Docker-compose におけるdepends_on 順序問題を解決する方法についての簡単な説明

>>:  HTML要素にフォーカスを設定する方法

推薦する

興味深いカウントダウン効果を実現するjs

js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...

HTMLページ間でパラメータを渡すフロントエンド方式の詳細な説明

プロジェクトでよくある状況として、案件リストなどのリストが存在することがあります。リスト内の項目をク...

Linux でバックグラウンド タスクを実行するために nohup と screen を使用する例と違いの簡単な分析

SSH ターミナル (putty、xshell など) を使用して Linux サーバーに接続し、時...

CSSクラス名の問題の詳細な説明

数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...

DockerはホストのMysql操作に接続します

今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...

MySQL データベース面接に必須の 3 つのログの紹介

目次1. redo ログ (MySQL ストレージ エンジン InnoDB のトランザクション ログ...

CSS 背景画像を設定するための 6 つの興味深いヒント

background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...

Vueは宮殿のグリッド回転抽選を実現します

Vueは宮殿グリッド回転抽選(CrossFireのxx転生に似ている)を実装しています。参考までに、...

JavaScript 円グラフの例

描画効果実装コードJavaScript var キャンバス = document.getElemen...

MySQL では SQL ステートメントはどのように実行されますか?

目次1. MySQLアーキテクチャの分析1.1 コネクタ1.2 クエリキャッシュ1.3 アナライザー...

MYSQLテーブルの包括的な概要

目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...

MySQL MGR の利点は何ですか?

MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...

...

MySQL 5.7 でパスワードを忘れた場合の解決方法の詳細な説明

環境: [root@centos7 ~]# uname -r 3.10.0-514.el7.x86_...