Slop Font ガイド

Slop Fontの使い方

Slop Fontは、ブラウザーで使えるフォントエディターです。フォントはこの端末に保存され、アップロードはされません。

Slop Font を開く

ページの構成

左側はグリフの一覧です。文字ごとに1つの枠があり、描かれるまでは破線になっています。中央には3つの表示があります。描画（グリフのエディター）、カーニング、表示テストです。右側のパネルには、グリフの幅と左右の余白、文字、手書きシート、書き出し、フォントの名前とライセンス、メトリクスがあります。

スマホではグリフの一覧がページになります。文字をタップすると描画でき、「‹ グリフ」で戻ります。パネルは下から開くシートです。「設定」をタップすると開きます。

文字を描く

グリッドで文字を選びます。
ペン（P）を選びます。クリックするととがった点になり、ドラッグすると曲線になります。最初の点をクリックすると図形が閉じます。
長方形（R）、楕円（E）、ストローク（S）でも描けます。別の図形の内側に描いた図形は穴になります。
選択（V）で点やハンドルを動かします。矢印キーで少しずつ動かし、Deleteで削除し、ダブルクリックで点を滑らかまたは角のある点に切り替えます。
Shiftキーで2つの輪郭を選び、「パス」▾の「結合」または「引き算」を使います。「重なりを削除」は、文字全体を1つにまとめます。

ヒント： 点はグリッドと、ベースライン、x高さ、キャップの高さ、アセンダー、ディセンダーに吸着します。Altキーを押しながら置くと、自由な位置に配置できます。

手元のデータを取り込む

「SVGから描く…」では、SVGまたはそのパスデータを貼り付けるか、.svgファイルを選んで、キャップの高さまたはx高さに合わせます。
「画像をトレース…」では、文字の写真が輪郭になります。インクのしきい値を設定してください。
「手書き」の「シートを印刷…」と「記入済みのシートを読み込む…」を使うと、手書きのページを1つのフォント全体にできます。
「開く…」では、編集するためにTTF、OTF、WOFF、WOFF2を開けます。

字間とカーニング

パネルで、文字ごとに「幅」「左の余白」「右の余白」を設定します。
カーニング表示で、2つの文字を入力し、スライダーを動かして、見本の行を確認します。
表示テストで、自分の文章を、いくつかのサイズで、明るい背景と暗い背景の両方で確認します。

書き出して保存する

「フォント」で、ファミリー名、デザイナー、ライセンスを設定します（「SIL Open Font License 1.1を使う」で自動的に入ります）。
「書き出し」で、TTF、OTF、WOFF2、WOFFのいずれかを選び、「フォントをダウンロード」または「Slop Driveに保存…」をクリックします。
「CSSの@font-faceをコピー」は、ウェブサイト向けのルールをコピーします。「プロジェクトを保存」は、後で編集し直せる.sfontファイルを保存します。