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 letters and other commonly-used characters over semantics / SEO / accessibility concerns, nobody prevents you from using latin letters.为了解决这些问题，您可以通过将role和aria-label属性添加到您的HTML元素中来识别字体图标：
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > 本存储库中所有内容的麻省理工学院许可证
