font template
1.0.0
Adobe Illustratorフォントテンプレートは、1つの.aiファイル（または別の.aiファイル）で.otf .ttf文字）の形状.woff2完全に編集し、必要に応じて.svgファイルとしてエクスポートし.woff 。など）。
私のウェブサイトのこのチュートリアルの美しいバージョン
font_template.ai （ダウンロード）：基本的および拡張シンボルとラテン文字用のAdobe Illustrator Fontテンプレート（CP1252の重要なカバレッジ）には、個々のGlyph SVGファイルとしてそれぞれを簡単にエクスポートできます。font_template_single.ai （ダウンロード）：単一のグリフ用のAdobe Illustrator Fontテンプレート。必要に応じて、 font_template.ai代わりに（または一緒に）このファイルを使用できます。batch_import_svg.py （open、ctrl + s / cmd + sを保存するためにctrl + s / cmd + s）：複数のSVG個々のGlyphファイルをfontforgeの.sfdフォントファイルにインポートできるPythonスクリプト（そして、オプションで生産フォントファイル、すなわち.otf 、 .ttf 、 .woff 、 .woff2などに変換できます） （ファイルをダウンロードする代わりに、 git clone https://github.com/tomchen/font-template.gitまたはリポジトリ全体をダウンロードすることもできます）
（ Fontforgeの最新バージョンを使用してください。Fontforgeは20周年記念版（2020-11-07）（Githubリリースページまたはfontforge.orgのダウンロードページ）です。古いWindowsバージョン20200314 SVGファイルをインポートするときにクラッシュします。 ）
font_template.aiを開いて、「アートワークグリフ」レイヤーにグリフを描きます。
（あなたのグリフがアートボードの部分的かつわずかに外にあるかどうかは関係ありません。）
グリフの描画を終えた後、「グリフの例」層を非表示にします。 [ファイル] - >「エクスポート」 - >「画面のエクスポート」をクリックします。
エクスポートするグリフを選択し（空のものを選択しないでください）、「svg」形式を選択し、「エクスポートアートボード」をクリックします。
エクスポートされた個々のGlyph SVGファイルは「SVG」フォルダー内にあり、 batch_import_svg.pyスクリプトファイルも含まれるフォルダーに入れます。
Windowsユーザーの場合、 C:Program Files (x86)FontForgeBuildsfontforge-console.bat cd <FOLDER_PATH>実行しますffpython batch_import_svg.py output.sfdフォントファイルが生成されます。
MacまたはLinuxユーザーの場合、 cd <FOLDER_PATH>を使用して、 fontforge -lang=py -script batch_import_svg.pyを実行します。
（*：64ビットウィンドウの場合、 Program Files (x86) 、32ビットウィンドウのProgram Filesの場合）
fontforgeを使用してoutput.sfdフォントファイルを開きます。グリフの幅を調整します（シフトキーを使用して、幅を調整するすべてのグリフを選択し、メニューで「メトリック」 - >「自動幅」を選択するか、グリフをダブルクリックしてボーダーラインを手動でドラッグします）。
メニューで、「ファイル」 - >「フォントの生成...」を選択します。
フォント名を入力し、フォント形式（通常はTrueTypeまたはOpentype）を選択し、[生成]ボタンをクリックします。次に、自作のコンピューターフォントがあります！
ここで停止することができ、次のセクションを読む必要はありません。
このフォントテンプレートを使用して、単一のグリフを描画し、単一のGlyph SVGを生成できます。
次の画像は、単一のグリフのガイドを示しています。
fontforgeで、グリフを選択するか、グリフを開き、「ファイル」 - >「インポート...」をクリックし、「svg」として「svg」を選択し、シングルGlyph svgファイルを選択してインポートします。
既存の.sfdフォントファイルを開くか、 .otf 、 .ttf 、 .woff 、 .woff2を生成する場合は、fontforge guiを使用するのではなく、.otf、.ttf、.woff、.woff2を生成する場合は、 batch_import_svg.pyファイルを変更します。
fontforgeメニューで、「ファイル」 - >「スクリプトを実行」をクリックします
コピーと貼り付け： SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
「FF」ラジアルボタンを選択します。
[OK]ボタンをクリックします。
グリフの形状に複数のオーバーラップパスが含まれている場合は、それらをグループ化したり、複合パスにしたりする代わりに、それら（素敵なYouTubeチュートリアル）に参加する方が良いでしょう。このステップは、パスの重複のためのフォントのレンダリング問題を回避するのに役立ちます。ただし、分離（重複しない）パスの場合、「グループ」（ Ctrl + G ）または「複合パス」（「オブジェクト」 - >「複合パス」 - >「メイク」）を自由に使用してください。
ScrachのFontForgeを使用してフォントファイルを作成する代わりに、既存の無料およびオープンソースフォントファイルをベースおよびフォールバックフォントとして使用することをお勧めします。優れたグリフカバレッジを備えた典型的なオープンソースフォントは、AdobeのソースSans ProおよびSource Serif Proです。ニーズに応じて、「通常」などの重みを選択してください。 fontforgeを使用してフォントファイルを開き、編集してフォントを作成します。ただし、既存のフォントを使用する場合は、AZ、AZだけでなく、「FF」や「FI」などの連結を編集する必要がある場合があります。
Illustratorの「Export for Screens」ウィンドウでGlyphsを選択した場合、空のグリフを選択しないでください。そうしないと、 batch_import_svg.pyスクリプトを実行すると「このファイルが複雑すぎる（または誤りがあります）」警告が表示されます。それにもかかわらず、それは停止せず、 output.sfdファイルを生成し続けます。
2020年8月19日に、プロジェクトのfont_template.aiファイルが更新されました（多くのアートボード名が変更されました。たとえば44 , 44 commaに変更されました）。ユニコードファイル名の問題を修正しました。 2020-08-19以前にfont_template.aiをダウンロードし、古いバージョンに基づいて.aiファイルを作成した場合、オプションで** font_template.aiのアートボード名を更新することができます。
.aiファイルから最新のfont_template.aiに「アートワークグリフ」レイヤー（および追加した他のレイヤー）をコピーします/other_files/update_artboard_names.js Illustratorで.aiファイルを開きます。メニューで、「ファイル」 - >「スクリプト」 - >「その他のスクリプト...」をクリックし、ダウンロードされたupduted update_artboard_names.jsファイルを見つけて選択します。更新後、 SVGフォルダーでGlyph SVGファイルを削除および再生します。
（**：古いバージョンを使用しているが、グリフが基本的なASCII文字に限定されている場合、SVG Unicode Filename関連の問題は発生しない場合、 .aiファイルを更新しないことを選択できます）
独自のフォントができたら、Webページ（Webサイト、Webアプリケーション、電子コンパイルされたクロスプレートフォームデスクトップアプリケーション、またはNative / nativeScriptモバイルアプリを含む）など）で使用できます。
フォントは、アルファベットフォントまたはモノクロアイコンフォントにすることができます。カラーアイコンを表示する場合は、SVGまたはPNGを使用してください。
CSSフォルダーに.woff2および.woff fontファイル（例のmy_font.woff2およびmy_font.woff ）をcssファイルに次のコードを挿入します（IE9+をサポートします）：
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} （IEをサポートしたくない場合は、 .woffファイルを削除して、 .woff2 （最小および最新形式）のみを使用できます）
次に、カスタマイズされたfont-family名（例で「myfont」）を使用します。
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}HTML：
< span class =" my-special-font " > B </ span >モノクロのアイコンフォントの場合、HTMLコードの文字Bは、文字Bへのモノクロアイコンマッピングとして表示されますが、Web開発者は通常、基本的なラテン文字やU+F2BBの文字を基本的なラテン文字やU+F2BBで、Semantics / seo / seo / cassibility concertを使用することはありません。これらの懸念に対処するために、HTML要素にroleとaria-label属性を追加することにより、フォントアイコンを意味的に識別できます。
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > このリポジトリのすべてのMITライセンス
