テキストまたはHTMLに必要な特定のグリフのみにフォントを簡単に最適化(サブセット)!
あなたはあなたのウェブサイトの最初のダウンロードサイズを心配していますか?メガバイトのダウンロードが必要であり、CSSとJavaScriptと画像を最適化および模倣しましたが、いくつかの大きなフォントを見つけましたか? fontimizeはあなたのためです!このツールは、HTMLファイルとCSS(または任意のテキスト)を分析し、実際に使用されている文字またはグリフのみを含むフォントサブセット、フォントファイルを作成します。
実際には、フォントのダウンロードサイズを元の10%以下に縮小できます。

FontimizeはTTF2WEBを使用し、その素晴らしいライブラリの著者に感謝と功績を称えします。
このライブラリはもともと私の個人的なウェブサイト用に作成されました。合計1.5MBをわずかに超える4つのTTFフォントを使用しました。 (これは珍しいことではありません。1つは見出し用です。1つは、イタリック用のバリアントを備えた通常のテキストに加えて、タイポグラフィーの癖、ドロップキャップの4つ目です。)
fontimizeを実行した後、すべてのフォントの合計サイズは76kbです。
1.5MBから76kbまでは95.2%の節約です!これは、サイト上のページをダウンロードする最初の時間に顕著な影響を与え、さらにレンダリングに大きな影響を与えました。前に、サイトの初期負荷が一般的なセリフフォントでレンダリングされ、数秒後にフォントがダウンロードされたら再レンダリングしました。これで、すぐに新しいフォントを取得するか、気付く前に、サイトは最初から正しいように見えます。
FONTIMIZEはPythonライブラリであり、Pythonソフトウェアに含めるか、コマンドラインで使用されているスタンドアロンを含めることができます。
fontimizeをインストールしてインポートすることから始めます。
$ python3 -m pip install fontimize
あなたのスクリプトで:
import fontimizeディスク上のHTMLファイルのセットと、使用するCSSファイルのセットを解析し、HTMLで使用されるグリフのみを含む新しいフォント(デフォルトでは元のフォントと同じフォルダーで)をエクスポートします。
all_html_files = [ 'input/one.html' , 'input/two.html' ]
font_results = fontimize . optimise_fonts_for_files ( all_html_files )
print ( font_results [ "css" ])
# Prints CSS files found used by any of the HTML input files:
# { 'input/main.css',
# 'input/secondary.css' }
print ( font_results [ "fonts" ])
# Prints pairs mapping the old fonts to the new optimised font generated for each. Use this to, eg, rewrite your CSS
# By default exports to the same folder as the input files; use `font_output_dir` to change
# { 'input/fonts/Arial.ttf': 'input/fonts/Arial.FontimizeSubset.woff2',
# 'input/fonts/EB Garamond.ttf': 'input/fonts/EB Garamond.FontimizeSubset.woff2' }
print ( font_results [ "chars" ]
# Prints the set of characters that were found or synthesised that the output fonts will use
# { ',', 'u', '.', '@', 'n', 'a', '_', 'l', 'i', 'h', 'Q', 'y', 'w', 'T', 'q', 'j', ' ', 'p', 'm', 's', 'o', 't', 'c' ... }
print ( font_results [ "uranges" ]
# Prints the same set of characters, formatted as ranges of Unicode characters
# U+0020, U+002C, U+002E, U+0040, U+0051, U+0054, U+005F, U+0061-007A ...optimise_fonts_for_files()これはおそらく使用したい方法です。
ディスク上の入力ファイルのセットに基づいてフォントを最適化 /サブセットし、HTMLファイルを参照する外部CSSファイルを(自動的に)ファイルします。ファイルは、 .htmまたは.htmlファイル拡張子を持っている場合、HTMLとして解析されます(ユーザー可視テキストが抽出され、CSSが解析されます)、そうでなければファイルはテキストとして扱われます。見つかったCSSファイルのリストと、古いものから新しい最適化されたフォントファイルのマップを返します。
パラメーター:
html_files : list[str] :パスのリスト。それぞれがHTMLファイルです。それぞれが分析されます。font_output_dir = "" :サブセットされたフォントを配置する場所へのパス。デフォルトでは、これは空( "" )です。これは、入力フォントと同じ場所に新しいフォントを生成することを意味します。新しいフォントの名前は異なるため(次のパラメーターであるsubsetname参照)、入力フォントを上書きしません。サブセットフォントが記述される前に既に存在するかどうかを確認することはありません。subsetname = "FontimizeSubset" :最適化されたフォントは、 OriginalName.FontimizeSubset.woff2の形式で名前が変更されます。サブセットされたフォントをすべてのグリフと元のフォントから区別することが重要です。出力サブセット名をファイルシステムで有効な他の文字列に変更できます。verbose : bool = False : Trueの場合、それが見つかって生成されているCSSファイル、フォントなどに関する診断情報を発します。print_stats : bool = True :入力フォントのディスク上の合計サイズの情報、最適化されたフォントの合計サイズ、およびパーセントの節約を印刷します。静かに実行したい場合は、これをFalseに設定します。fonts : list[str] = [] :フォントファイルへのパスのリスト。これらは、メソッドがCSSを介して見つけるフォントに追加されます。通常、HTMLではなくテキストファイルを渡している場合は、これを指定しますaddtl_text : str = "" :ファイルにあるものに追加する必要がある追加文字返品:
dict[str, typing.Any]return_value["css"] - > HTMLファイルが使用する一意のCSSファイルのリストreturn_value["fonts"] - > a dict keys()が元のフォントファイルであり、各キーの値は生成された交換用フォントファイルです。これを使用して、元のフォントファイルへの参照を更新できます。 Fontimizerは入力CSSを書き換えないことに注意してください。return_value["chars"] - >入力を解析するときに見つかった文字のsetreturn_value["uranges] - >同じ文字のユニコードの範囲:" u+1000-2000、u+2500-2501 "など。各ペアの2番目の数値には「u+」がないことに注意してください。optimise_fonts_for_html_contents() optimise_fonts_for_html_filesと同様に、入力が文字列としてHTMLであることを除き(eg <head>...</head><body>...<body> )。使用されているCSSファイルを見つける(したがって使用されるフォント)を見つけるために解析することはないため、最適化するフォントファイルのリストも提供する必要があります。
パラメーター:
html_contents : list[str] :html文字列のリスト。テキストは抽出され、最適化されたフォントのグリフのリストを生成するために使用されます。fonts : list[str] :ローカルファイルシステムのパスのリストは、最適化するファイルをフォントするためにファイルをフォントします。これらは相対的なパスになる可能性があります。その他のパラメーター( fontpath 、 subsetname 、 verbose 、 print_stats )は、 optimise_fonts_for_html_filesと同じです。
返品:
keys()が元のフォントファイルであり、各キーの値は生成された交換用フォントファイルですdictoptimise_fonts_for_multiple_text() optimise_fonts_for_html_contentsと同様に、入力がpython文字列のリストです。これらの文字列の内容は、最適化されたフォントのグリフを生成するために使用されます。入力文字列にすべての一意の文字にグリフがあります(入力フォントが必要なグリフが含まれている場合)。
入力フォントファイルとしてフォントファイル( fontsパラメーター)のリストを渡して、テキストに基づいて最適化します。
パラメーター:
texts : list[str] :python文字列のリスト。生成されたフォントには、これらの文字列が使用するグリフが含まれます。その他のパラメーター( fonts 、 fontpath 、 subsetname 、 verbose 、 print_stats )およびReturn Valueは、 optimise_fonts_for_html_contentsにIdentialです。
optimise_fonts()これが主な方法です。上記のすべての方法はここにあります。テキストのPython Unicode文字列と、最適化するフォントファイルへのパスのリストを使用し、入力テキストに必要な一意のグリフのみを含むフォントサブセットを作成します。
パラメーター:
text: str :Python Unicode文字列。これから一意のユニコード文字のセットが生成され、出力フォントファイルには、この文字列を正しくレンダリングするために必要なすべてのグリフが含まれます(フォントには最初のグリフが含まれていると仮定します)。その他のパラメーター( fonts 、 fontpath 、 subsetname 、 verbose 、 print_stats )およびReturn Valueは、 optimise_fonts_for_html_contentsとoptimise_fonts_for_multiple_textと同一です。
コマンドラインツールは、スタンドアロンを使用したり、コンテンツ生成パイプラインに統合したりできます。
簡単な使用法:
python3 fontimize.py file_a.html file_b.html
これにより、HTMLと参照されている外部CSSファイルが解析され、グリフと使用済みのフォントの両方が見つかります。入力フォントファイルと同じ場所に新しいフォントファイルを生成します。
python3 fontimize.py --text "The fonts will contain only the glyphs in this string" --fonts "Arial.tff" "Times New Roman.ttf"
これにより、指定された文字列に必要なグリフのみが生成され、入力フォントファイルと同じ場所にArialとTimesの新しいローマの新しいローマンがWoff2形式の新しいバージョンを作成します。
--text "string here" ( -t ):この文字列をレンダリングするために使用されるグリフは、指定されている場合は入力ファイルにあるグリフに追加されます。入力ファイルまたはテキスト(またはその両方)のいずれかを渡す必要があります。そうしないと、エラーが与えられます。--fonts "a.ttf" "b.ttf" ( -f ):入力フォントのオプションリスト。これらは、HTML/CSSを介して参照される見つかった任意の任意のものに追加されます。 --outputdir folder_here ( -o ):生成されたフォントファイルを配置するディレクトリ。これはすでに存在する必要があります。--subsetname MySubset ( -s ):生成されたフォントファイル名で使用されるフレーズ。 (定義上、サブセットとして)不完全であるため、出力フォントを入力フォントと区別することが重要です。 --verbose ( -v ):処理中に詳細情報を出力します--nostats ( -n ):最後に最適化された結果に関する情報を印刷しませんユニットテストはtests.pyを介して実行され、 testsでファイルを使用します。これによりtestsoutputフォルダー内で新しい出力ファイルが生成されることに注意してください。
testsフォルダーには、SILオープンフォントライセンスの下でライセンスされているいくつかのフォントが含まれています。
カスタム静的サイトジェネレーターの一部としてfontimizeを使用してサイトを構築します。最終ステップとして動作し、ディスクに保存されている生成されたHTMLファイルに基づいてフォントを最適化します。 FONTIMIZEからの戻り値(作成したフォントや分析したCSSファイルなど)は、CSSを書き換えて、新しく最適化されたフォントを指すために使用されます。
(現在、CSSの書き換えはfontimizeによって提供される機能ではありません。必要に応じて問題を作成したり、リクエストをプルしてください。現在、ライブラリは新しいフォントファイルを生成し、古いフォントファイルと対応する新しいファイルを表示するマッピング(辞書またはテキスト出力として)を返します。これを明示的に行う必要があります。例外は出力フォントです。
デフォルトでは、新しいサブセットされたフォントには、接尾辞「FontimizerSubset」(例: Arial.FontimizerSubset.woff2 )に命名されます。 subsetnameメソッドパラメーターまたは--subsetname=Fooコマンドラインパラメーターを使用して、サブセットフォントの名前をカスタマイズできます。サブセット名を使用して、最適化されたフォントを元のフォント(すべてのグリフを含む)と混同しないようにすることをお勧めしますが、お好みの名前を使用できます。デフォルトの名前「fontimizersubset」は、他の人がこのライブラリに遭遇した場合に、他の人を遭遇した場合の提案です。この名前を保持する必要はなく、別のフレーズを自由に使用できます。
css pseudo-elements:
明示的に使用されているフォントと、画面に表示されるグリフの両方のフォントについて、fontimize CSS。これには:before :afterようなCSS擬似要素のグリフが含まれます。テキストまたは文字がこれらの擬似要素で定義されている場合、それらはサブセットされたフォントに含まれます。
インラインCSS:
fontimizeは現在、HTMLファイルにインラインCSSを解析しません。外部CSSが使用されていると想定しており、HTMLドキュメントの<head>セクションの<link>タグを介して見つかります。 Fontimizeは、これらのCSSファイルをフォントとグリフの分析します。インラインCSSの解析が役立つ場合は、問題を提起してください。
追加の文字:
入力テキストにシングルまたはダブルの引用符が見つかった場合、サブセットされたフォントには、対応する左および右傾向の引用も含まれます。同様に、ダッシュが見つかった場合、サブセットにはENダッシュとEMダッシュの両方が含まれます。
fontimizerを使用する場合は、https://fontimize.daveon.design/またはこのgithubリポジトリにリンクするのは本当に素晴らしいことです(必須ではありません)。それは、他の人にツールを示すことです。たくさんのありがとう:)