以前、「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 順序問題を解決する方法についての簡単な説明
js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...
プロジェクトでよくある状況として、案件リストなどのリストが存在することがあります。リスト内の項目をク...
SSH ターミナル (putty、xshell など) を使用して Linux サーバーに接続し、時...
数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...
今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...
目次1. redo ログ (MySQL ストレージ エンジン InnoDB のトランザクション ログ...
background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...
Vueは宮殿グリッド回転抽選(CrossFireのxx転生に似ている)を実装しています。参考までに、...
描画効果実装コードJavaScript var キャンバス = document.getElemen...
目次1. MySQLアーキテクチャの分析1.1 コネクタ1.2 クエリキャッシュ1.3 アナライザー...
目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...
MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...
Ⅰ. 問題の説明: html+css を使用してシンプルなナビゲーション バーを実装します。 **...
環境: [root@centos7 ~]# uname -r 3.10.0-514.el7.x86_...