最近、小プログラム RPshare を作る際に、デザインには優れたデザインのタイトルフォントが使用されました。実際に構築する際には、base64 で圧縮されたフォントを直接コードに組み込む方法を使用しました。個人的にはこの方法が好きで、ファイルを追加するよりもコードだけで問題を解決する方が簡単で便利です。ちょうど最近、誰かが私に中国語フォントの圧縮とインポート方法について尋ねてきました。以前にブログで書いたことはありますが、フォントの圧縮サイトが無効になっており、手順も煩雑です。そこで、この記事を書くことにしました。
準備#
- nodejs フォントスパイダーをインストール
- 圧縮するフォントファイルを
font.ttfという名前に変更する font.htmlファイルが 1 つ必要です
フォントスパイダーのインストール#
すでに nodejs 環境がインストールされている場合は、以下のコマンドを使用して直接インストールできます。nodejs がインストールされていない場合は、こちらを参照してください。
npm install font-spider -g
font.html ファイル#
font.html ファイルを作成し、これはフォントスパイダーでフォントを圧縮するために必要な手順です。以下の内容に置き換えてください。**div タグ内の内容を必要なテキストに置き換えてください。** 圧縮されたファイルには、これらのテキストが含まれます。フォントスパイダーは自動的に重複を削除するため、重複していても問題ありません。
<!DOCTYPE html>
<html lang="en">
<style>
@font-face {
font-family: font;
src: url("./font.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNMファイルライブラリ画像コード新規作成コード取得共有機能はまだ利用できません！ファイル共有権限を申請できます。簡単な説明：高速印刷
</div>
</body>
</html>
<style>
div{
font-family: font;
}
</style>
圧縮の開始#
作成した font.html ファイルと font.ttf ファイルを同じディレクトリに配置し、フォルダの空白部分で右クリックし、PowerShell ウィンドウで開く を選択し、次のコマンドを入力します。
font-spider font.html
このようなコマンドが表示されれば、圧縮が成功したことを意味します。元のフォルダにある font.ttf は圧縮後のフォントファイルに置き換えられ、圧縮されていない元のフォントファイルは、フォントスパイダーが作成した .font-spider フォルダに保存されます。フォントファイルを直接使用する場合は、ファイルを使用するだけで問題ありませんが、WeChat 小プログラムはフォントファイルの直接使用をサポートしていないため、フォントファイルのネットワークリンクまたは base64 での直接インポートが必要です。私はフォントを base64 コードに変換する必要があります。
フォントを base64 に変換#
私はこのウェブサイトを使用しています。Base64 encode オプションを開き、下部のいくつかのフォントファイルのチェックを解除します（必要ない場合は、これらのフォントファイルが生成されます）。私が必要なのは base64 だけなので、チェックを解除しました。
Add font をクリックして、フォントスパイダーで圧縮したフォントファイルを選択し、Convert をクリックして、圧縮されたフォントファイルのパッケージをダウンロードします。style.css ファイルには、base64 で圧縮されたフォントのインポートコードが含まれています。次に、このコードを CSS ファイルに追加してください。小プログラムでは、グローバルな CSS ファイルに追加することができますので、すべてのページでこのフォントを使用することができます〜
