大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1.什么是 ai2html

ai2html 是 Adob?e Illustrator 的开源脚本，可将 Illustrator 文档转换为 html 和 css，基于 ai2html 的诸多示例登上了 New York Times。

ai2html由不同的组成部分：

• ai2html-css：支持插入到 html 中的 css，可以将其包含在 Illustrator 文档中某处的文本块中，但不要包含在画板上。
• ai2html-js：支持添加始终插入到 html 部分中的 javascript，可以将其包含在 Illustrator 文档中某处的文本块中，但不要包含在画板上。
• ai2html-html：添加始终插入到 html 部分中的 html，请将其包含在 Illustrator 文档中某处的文本块中，但不要包含在画板上。
• ai2html-text：可以将文本存储到变量中，并使用基本的 Mustache 或 erb/ejs 表示法将它们插入到文档中。

目前 ai2html 在 Github 上开源，是一个值得关注的 AI 类前端开源项目。

2.为什么需要 ai2html

很多人会有此疑问，为什么不直接将 Illustrator 文件导出为图像或 SVG？

图像和 SVG 中的文本会随着图像的缩放而缩放，因此当艺术品缩小时，文本很快就会变得难以辨认，或者在放大时看起来非常大。

通过将文本渲染为 html，可以上下缩放“图形”同时保持文本在相同的字体大小和行高下可读，从而适应从手机到巨型桌面显示器的视口。

可以打开链接 http://nyti.ms/1CQdkwq ，然后查看页面时更改窗口大小，此时将看到图稿比例变化，但文本保持相同大小。 更多示例可以查看 https://del.icio.us/archietse/ai2html+responsive

同时，当 Illustrator 保存 SVG 时，每一行文本都会被分解为单独的 SVG 元素，这使得编辑文本变得非常困难。 通过以 HTML 形式渲染文本，编辑人员可以更轻松地进入 CMS 并进行编辑，而无需费力地浏览一堆 SVG 代码。

当然，ai2html 也有一定的局限性，主要体现在以下几点：

• 由于在设置文本格式和定位元素时，网页会将数字四舍五入为整像素，因此图形的 html 版本将不会与其 Illustrator 版本完全一致。 如果文本块跨越多行并且在 Illustrator 中具有小数行距，则舍入差异会特别复杂。
• 设置为 valign:bottom 的非常大的文本目前无法正确定位
• ai2html 只关注文本，而可能忽略艺术的成分
• 画板应该有唯一的名称。
• 图形对象中的标签将渲染为图像的一部分。 如果希望图表标签显示为 html，则需要取消图表分组。
• 在区域文本块中，由于溢出框而隐藏的文本将出现在 html 输出中。

3.安装/使用 ai2html

将 ai2html 的 CDN 文件下载保存到电脑，下载地址已经在文末给出。

将 ai2html.js 文件移动到脚本所在的 Illustrator 文件夹中。 例如，在运行 Adobe Illustrator CC 2015 的 Mac 上，路径为：

/Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js

接着按照以下步骤使用 ai2html：

• 创建 Illustrator 作品。例如：将画板调整为希望以 div 在网页上显示的尺寸；确保文档颜色模式设置为 RGB；保存文档；使用 Arial 或 Georgia，除非已将自己的字体添加到脚本中的字体数组中。
• 通过选择以下方式运行脚本：File > Scripts > ai2html
• 转到包含 Illustrator 文件的文件夹， 里面有一个名为 ai2html-output 的输出文件夹， 在浏览器中打开 html 文件以预览输出。

参考资料

http://ai2html.org/

https://github.com/newsdev/ai2html

https://raw.githubusercontent.com/newsdev/ai2html/master/ai2html.js