如何把你的图标转换成WEB字体发布者：本站     时间：2020-05-17 13:05:49

我已经制为网站制作了一些优雅的图标，并且在新的网站和老的iPad上进行了测试。正常尺寸下，布局看看上去一切OK，但的将页面进行放大显示，我却发现我的icon变得模糊不清，但是基于文本的标题依然清晰可见。在具有Retina显屏的iPad上，这些图标看上去都不清晰，即使在没有进行任何放大的情况之下。
我第一想法就是创建双倍大小的Sprite图，然后通过css样式，设置他们只显示二分之一尺寸。虽然这样的方法让他们在Retina屏上显示的大小是正常的，一旦你开始放大屏幕，图标又变得模糊不清。但文本还是一样的清晰。

答案很明显，我需要把我的图标变成一个字体。

如何把你的图标转换成WEB字体 三联
在这篇教程中，我们将看看如何使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体。然后在看看如何使用生成的字体通过css应用到Web页面中。

使用字体图标的优势

字体图标除了图像清晰度之外，比位图还有哪些优势呢。

适用性：一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小。一旦图标字体加载了，你的图标就会马上渲染出来，不需要下载一个图像。

可扩展性：图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标，然而，使用位图，你必须得为每个不同大小的图像输出一个不同文件。

灵活性：文字效果可以很容易地应用到你的图标上，包括颜色，阴影和翻转等效果。他们还可以在任何背景下显示。

兼容性：网页字体支持所有现代浏览器，包括IE低版本。详细兼容性可以点击这里。

我们开始吧!

创建一个图标字体

Symbol字体可以使用一个专用的字体创建应用程序，比如说Glyphs，但是一个专业的排版工具之外的需求或要求构建一个简单的图标字体，比如说间距和粗细这样的物理关系并不是非常重要。

目前为止，最简单的方法是使用Keyamoon制作的一个Web应用程序IcoMoon，可以解决字符转换成Web字体的所有麻烦。

这个Html5应用程序解决了创建字体文件和如何使用创建的图标字体的一切麻烦。IcoMoon附带了大量的图标，你也可以通过图标库添加更多的图标，其中大部分都可以免费使用(使用时请先查看他们的许可证)。如果你正在寻找如“文件下载”和“购物车”一样的图标，那么你会发现，使用标准的图标比你自己创建的要方便得多。