svg embed font

SVGアセットにフォントを埋め込みます

SVGはデバイスに依存しない解像度に役立ちますが、すべてのブラウザで適切にレンダリングするためにフォントをファイルに埋め込む必要があるため、多くの場合、痛みになる可能性があります。 svg-embed-font SVGファイルで使用されているフォントを簡単に判断し、その中のbase64アセットとしてエンコードするコマンドラインツールです。

SVGアセットがコンピューターで見栄えが良く、他のすべての人にめちゃくちゃになった場合、それはフォントがファイルに適切に埋め込まれていないためです。

使用法

 svg-embed-font input.svg

デフォルトモードでは、すべてのフォントファミリー宣言のSVGファイルをスキャンし、一致するフォントファイル（任意のフォントファイル形式）を見つけようとします。一致は、スペースを無視するフォントファミリ名のケース非感受性サブストリングマッチとして定義されます。だからあなたが宣言した場合：

 font-family: 'Permanent Marker'

Matches:
permanentmarker.ttf
PermanentMarker-700.otf

この場合、2つの可能な一致があります。これは、フォントに複数の重みがある場合に発生することがよくあります。使用する必要があるものを指定するには、入力ファイルの後にコマンドラインのフォントをリストします。コマンドラインに正しいものをリストすることにより、複数の可能な一致を解決する必要があります。

 svg-embed-font input.svg permanentmarker.ttf

コマンドラインに1つ以上の優先フォントファイルをリストすることができ、見つけた他の一致の代わりにそれらのファイルを使用します。

フォントファイルパス検索

正確なフォントファイルを指定しない場合、一致のために現在のディレクトリとすべてのサブディレクトリを調べるので、論理階層にファイルをレイアウトすると、それらが見つかります。 SVGファイルのすべてのフォントと一致することなく、すべての可能なファイルを排出すると、エラーが返されます。

それがどのように機能するか

フォントファイルはbase64エンコードされており、SVGファイルにStyleSheetアセットとして直接含まれています。テキストエディターでファイルを開くと、閉じる</defs>タグの直前に、各フォントの次のようなものが表示されます。

 <style type="text/css">
	<![CDATA[
		@font-face {
			font-family: 'Permanent Marker';
			src: url('data:application/x-font-ttf;base64,AAEAAAAOAIAAAwBgT1MvMmH1Ke...<lots more>');
		}
	]]>
</style>

インストール

[リリース]ページのオペレーティングシステムに適したリリースをダウンロードしてください。

ライセンス

mit