以前、「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 順序問題を解決する方法についての簡単な説明
目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...
React Native は、プルアップとプルダウンの監視ジェスチャを実装します。詳細なコアコードは...
通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親...
誰もが色にとても敏感だと思います。私たちの目が見るところにはどこにでも色があります。では、CSS で...
結果:実装コードhtml <link href='https://fonts.goog...
目次1. グローバルガード1.1 グローバルフロントガード1.2 グローバルポストルートガード1.3...
<br />「この世に醜い女性はいない、あるのは怠惰な女性だけだ」これは女性の美のバイブ...
今日、slave_exec_modeというパラメータを偶然見ました。マニュアルの説明から、このパラメ...
目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...
目次基本的な指示1. 現在のマシンのコンテナステータスを確認する2. イメージをダウンロードまたは取...
この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを参考までに紹介します...
ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...
導入定期的にヘルスチェックを送信して、アップストリーム グループ内の HTTP サーバーのヘルスを監...
Windows と Linux 間でファイルを転送する場合は、Xftp ツールを使用できます。この...
この実験のテスト環境: Windows 10+cmd+MySQL5.6.36+InnoDB 1. ト...