ai字体设计网站-用AI把图标做成字体，非常实用

随着手机屏幕分辨率的提高，对手机网页图像的精度要求也逐渐提高。 过去，图片形式的图标必须足够大，才能保证在高PPI下显示效果足够清晰。 同时，不知道从什么时候开始，字体图标也逐渐出现了。 所谓字体图标，就是将图标做成字体。 在网页中，可以和文字一样大，使用CSS来指定字体大小、颜色、阴影等，让它成为你想要的大小。 优点是不言而喻的。

近年来公司转型，开始做基于Html5的移动网页开发。 一直在使用网上免费提供的字体图标库，但难免遇到个性化的需求，所以前段时间，我抽出时间研究一下如何自己制作字体图标。 网上有很多教程，但大多都比较复杂，需要安装一些软件工具。 纠结了很久，终于想出了一个简单的方法，现在分享给大家：

基本思路： 1.制作图标→2.生成图标字体→3.使用CSS将字体引入网站。

工具：

1. Adob​​e Illustrator，版本不限，只要能够将文件保存为SVG格式即可（其他可以创建SVG格式的软件应该也可以，我没有尝试过）；

2.压缩工具，支持ZIP格式（基本上所有压缩工具都支持）。

还要确保您的计算机可以访问互联网。

具体制作步骤如下：

1、在AI中新建一个文档ai字体设计网站，宽高均为512像素，如下图（别问我为什么是512px，我也不知道，试了几次才知道，只有这个尺寸和网页中的字体大小正确）；

2. 在文档中绘制图标时，可以使用钢笔或图形工具，但请注意颜色应为黑色，背景应为空，并且不能有渐变、半透明等那。 如下图（原则上图形的绘制点应尽可能少，同时尽量在一条路径中完成整个图标。根据设计情况选择是否将四个边留空以确保所有图标在视觉上尺寸平衡且风格统一）；

3. 绘制完成后保存。 保存时必须选择SVG格式。 这是关键点，如下图。 默认的 SVG 选项很好（我的默认版本是 1.1）。 此外，命名和图标必须匹配。 使用英语。 如果你懒的话，就用拼音。 至少确保你能认出哪个是哪个。 多个单词用“-”替换空格（svg文件可以在浏览器中打开查看）；

在Google Chrome中查看SVG文件的效果

4、重复上述步骤，绘制所有需要的图标并保存为SVG文件，并放在同一个文件夹中。 为该文件夹命名，如下所示。

这里仅举三个例子。 在实际应用中，建议使用两个或多个。 如果只有一个ip形象，则不会生成CSS和html文件。

5. 将此文件夹压缩为 zip 文件。

6、访问地址：（有点慢，请耐心等待，这个网站很强大，直接搞定了后两步）。 进入后会看到如下界面，将zip文件拖入红框范围内（也可以点击红框范围选择zip文件），耐心等待文件上传并转换吉祥物，不要关闭浏览器。 字体转换完成后，会自动下载一个名为 iconvault.zip 的文件。 如果没有自动下载，您可以点击网站上出现的链接进行下载（压缩包在附件中供您参考）。

7、解压 iconvault.zip 文件，可以看到以下文件（可以打开后缀查看文件类型）： .fontcustom-data 可以删除。 eot、svg、ttf、woff 是字体文件，兼容不同平台。 一个 CSS 文件和一个 html 文件。 用浏览器打开html文件，你可以看到你设计的所有图标，以不同的字体大小排列。

用浏览器打开html文件可以看到什么

对于强迫症来说ai字体设计网站，这么长的文件名会让人抓狂，所以打开css文件，找到最上面的几个字体文件的名字，改掉，然后再改对应字体文件的名字。

介绍网站时，html 文件就是一个很好的例子。 如果你了解一点html和CSS，你就会知道。 引入CSS样式后，只需要在网页中写这个即可。 就像文本一样，指定相应的样式，就会有相应的效果。

即使此时字体图标制作完成，生成的字体图标在尺寸较小的情况下在电脑上查看时也会出现一些瑕疵。 这是因为在制作图标时没有考虑到小分辨率，就像文字显示太小一样。 这并不理想，需要良好的适应。 但在高PPI的手机屏幕上浏览是没有问题的。 当然，对于更加丰富多彩的图标，我们还是只能依靠图片。

看到这里，你可以尝试将你的公司或你自己的标志制作成图标字体。 试一试！

以上就是利用AI将图标制作成字体的全部实用内容。 希望对大家有所帮助。 感谢您对2345软件百科的支持。 更多软件教程请关注2345软件百科。