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

以前、「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要素にフォーカスを設定する方法