コンソールから@ font-faceキットの生成を自動化する

ウェブ用のフォントの生成を何らかの方法で自動化することが可能かどうか、または毎回Font Squirrelに行くのにうんざりしているのではないかと思ったら、彼らは言うように、猫を歓迎します。



先日、私は人気のあるWebフォントジェネレータFont Squirrel用のコンソールユーティリティ、本質的にクライアントを作成しました。 私は彼女をマーモット(グラウンドホッグ)と呼びました。彼女ができることは次のとおりです。



marmot Averia-Regular.ttf # ls . => webfontkit.zip
      
      





Marmotは任意のフォントを取得してFont Squirrelにアップロードし、woff、ttf、eot、およびsvgバージョンのフォントでアーカイブをダウンロードします。 デフォルトでは、標準のジェネレーター設定が使用されます。

Font Squirrelからダウンロードしたアーカイブには常にgenerator-config.txtというファイルが含まれているため、Marmotはそれを読み取ることができます。



 marmot -c generator-config.txt font.otf
      
      





かっこいい、ダウンロードする場所、設定する方法



マーモットは摩擦で書かれており、通常のジャムのように配置されています。



 gem install marmot
      
      





構成方法



オプションの1つは、上記で説明した構成ファイルを使用することです。 形式はJSONで、次のようになります。



 { "formats":["ttf", "woff", "svg"], "fallback":"none", "subset_custom_range":"E000-F8FF", "emsquare":"1000" }
      
      





2番目のオプションは、コンソールからパラメーターを設定することです。



 marmot --no-add-hyphens --formats=ttf,woff font.otf
      
      





たくさんのパラメーターがあり、それらの名前はわかりにくいと言って鈍い場合があり、簡単にするために、ジェネレーターページに移動し、コンソールで次のコードを実行します。



 $("input[value='expert'], input[value='advanced']").click(); $("table input").each(function(){ $(this).after($("<div style='color:red;'>"+$(this).attr("name")+" : "+$(this).attr("value")+"</div>")); });
      
      





したがって、より明確になります。





トロリーバスの写真またはそれが必要な理由



実際、ほとんどの場合、ジェネレータページに移動し、目的のフォントを一度生成してプロジェクトフォルダに配置する方がおそらく簡単です。



まあ、あなたはいたずら好きで、なぜ私はこのすべてを読んだのですか?



先日、アイコンフォントを使用する必要がありました(これは今では流行のトピックですよね?)そして、新しいアイコンを追加するたびに、この鈍い変換手順を毎回繰り返す必要がありました。 これを行わないように(そして、そのような苦痛からあなた方全員を救うために)、私はマーモットを書きました。

次のようにスクリプトを実行します。



 rm -r ./web/app/assets/fonts/icons marmot -dc ./web/config/font-config.json ./design/icons-Regular.otf output.zip && unzip output.zip -d ./web/app/assets/fonts/icons
      
      





...そしてすべて



私のクラフトは、このプロセスを自動化することを望んでいたすべての人々、およびコンソールからすべてを実行したい私のようなオタクに役立ちます。



興味のある方は、githubのコードをご覧ください: Githubコード



すべての平和



All Articles