font template
1.0.0
Adobe Illustrator字體模板允許您在一個.ai文件中完全編輯字形（字符）的形狀（或在其單獨的，相應的.ai如果需要的情況下），然後將它們導出為.svg文件，這些文件可以將其導入到FONT和開放的Font Maker Fontforge，fonter Fontforge，and Final Fient Fort Font Font Font Font Font Font Font Font Font .otf Font 2 .woff .woff2 .ttf 2，.。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。
我網站上本教程的精美版本
font_template.ai （下載）：基本和擴展符號和拉丁字母的Adobe Illustrator字體模板（重要的CP1252覆蓋範圍），每個字形都有一個單獨的Artboard，因此您可以輕鬆地將它們作為單個Glyph SVG文件導出。font_template_single.ai （下載）：單一字形的Adobe Illustrator字體模板。如果需要，可以使用此文件代替（或與） font_template.ai 。batch_import_svg.py （打開，然後ctrl + s / cmd + s保存）：一個可以將多個SVG單個glyph文件導入fontforge的.sfd font文件中的Python腳本（並且可以選擇地將其轉換為生產Font Font Files，即.otf ，.ttf， .ttf ，.woff， .woff ，.woff，.woff， .woff2 2等） （而不是下載文件，您還可以git clone https://github.com/tomchen/font-template.git或下載整個存儲庫）
（確保您使用最新版本的Fontforge，即20週年版（2020-11-07）（GitHub Release Page或Fontforge.org下載頁面）。導入SVG文件時舊的Windows版本20200314崩潰。 ）
打開font_template.ai ，在“藝術品字形”層中繪製字形。
（您的字形是否部分且略微在其藝術板之外都沒關係。）
完成繪製字形後，隱藏“示例字形”層。單擊“文件” - >“導出” - >“屏幕導出”。
選擇要導出的字形（不要選擇空的字形），選擇“ SVG”格式，單擊“導出Artboard”。
導出的單個字形SVG文件位於“ SVG”文件夾中，將其放入一個文件夾中，該文件夾還包含batch_import_svg.py腳本文件。
對於Windows用戶，運行C:Program Files (x86)FontForgeBuildsfontforge-console.bat ，*使用cd <FOLDER_PATH>導航到文件夾，並使用ffpython batch_import_svg.py執行Python腳本。將生成一個output.sfd字體文件。
對於Mac或Linux用戶， cd <FOLDER_PATH>和執行fontforge -lang=py -script batch_import_svg.py 。
（*：對於64位Windows的Program Files (x86) ，對於32位Windows的Program Files ）
用fontforge打開output.sfd字體文件。調整字形的寬度（使用Shift鍵選擇要調整寬度的所有字形，然後，在菜單中，選擇“指標” - >“自動寬度”，或雙擊字形並手動拖動其邊框線）。
在菜單中，選擇“文件” - >“生成字體...”
輸入字體名稱，選擇字體格式（通常是trueType或opentype），單擊“生成”按鈕。然後，您擁有自己的自製計算機字體！
您可以在這裡停下來，不需要閱讀以下各節。
該字體模板可用於繪製單字形並產生單字形SVG。
以下圖像描繪了單個字形的指南。
在Fontforge中，選擇字形或打開字形，然後單擊“文件” - >“導入...”，選擇“ SVG”為“格式”，選擇您的單個Glyph Svg文件並導入。
如果要打開現有的.sfd字體文件或生成.otf ， .ttf ， .woff ， .woff2 ，而不是直接使用Fontforge gui進行，則修改batch_import_svg.py文件。
在Fontforge菜單中，單擊“文件” - >“執行腳本”
複製和粘貼： SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
選擇“ FF”徑向按鈕。
單擊“確定”按鈕。
如果字形的形狀包含多個重疊的路徑，則最好加入它們（一個不錯的YouTube教程），而不是對它們進行分組或使其成為複合路徑。此步驟有助於避免字體渲染問題，以解決重疊路徑。但是，對於單獨的（非重疊）路徑，請隨時使用“組”（ CTRL + G ）或“複合路徑”（“對象” - >“複合路徑” - >“ make”）。
與其使用Scrach的Fontforge創建字體文件，有時是使用現有的免費和開源字體文件作為基礎和後備字體是一個好主意。典型的開源字體具有良好的字形覆蓋範圍，是Adobe的源Sans Pro和Source Serif Pro。根據您的需求，選擇“常規”等重量。使用Fontforge打開字體文件，編輯以創建您的字體。但是，如果您使用現有字體，則可能不僅需要編輯AZ，AZ，還需要編輯其連接，例如“ FF”和“ FI”。
當您在Illustrator的“屏幕導出”窗口中選擇字形時，您不應選擇空字形，否則，您會看到“對不起，此文件對我來說太複雜了（或者是錯誤的）”警告當您執行batch_import_svg.py腳本時。但是，它不會停止，並且會繼續生成output.sfd文件。
2020年8月19日，該項目的font_template.ai文件已更新（更改了許多藝術板名稱，例如44 ,更改為44 comma ），以修復Unicode文件名問題。如果您在2020-08-19之前已下載font_template.ai font_template.ai並根據舊版本製作.ai文件，則可以選擇使用以下任何方法：
.ai文件中復製到最新的font_template.ai/other_files/update_artboard_names.js in Illustrator：在菜單中打開.ai文件，在菜單中，單擊“ file” - >“ scripts” - >“ scripts” - >“其他腳本...”，查找並選擇下載的update_artboard_names.js文件，單擊“打開”更新後，在SVG文件夾中刪除和再生您的字形SVG文件。
（**：如果您使用的是舊版本，但字形僅限於基本的ASCII字符，因此不會遇到任何SVG Unicode文件名相關的問題，您可能會選擇不更新您的.ai文件）
擁有自己的字體後，您可以在網頁上使用它（包括網站，Web應用程序，電子編譯的跨板桌面桌面應用程序，甚至React Antive / Native / Native Mobile App）。
您的字體可以是字母字體或單色圖標字體。如果要顯示顏色圖標，請使用SVG或PNG。
將您的.woff2和.woff font文件（示例中的my_font.woff2和my_font.woff ）放入您的CSS文件夾中，然後在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 > If it is a monochrome icon font, the letter B in the HTML code will be shown as the monochrome icon mapping to the letter B. Although web developers usually use characters in Unicode Private Use Area such as U+EEA0 and U+F2BB instead of basic latin role和aria-label屬性添加到您的HTML元素中來識別字體圖標：
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > 本存儲庫中所有內容的麻省理工學院許可證
