It is commonplace to see icon fonts used for a range of simple graphical elements around the web, from the display of social media icons inside sharing buttons on a website to a speech bubble icon that tells readers about the number of comments on an article.
从网站上共享按钮内部的社交媒体图标的显示到告诉读者文章评论数量的气泡图标，在网络上看到用于一系列简单图形元素的图标字体是很平常的事。
There are a number of features that make icon fonts so useful. Firstly, unlike regular images, font icons have no pixelation on high-resolution screens. They can scale up as much as needed without blurriness. Secondly, a lot of their properties can be controlled directly using CSS. You can change their size and color, or apply text-shadows with a few lines of CSS. They are also much easier to use than image sprites.
有许多功能使图标字体如此有用。 首先，与常规图像不同，字体图标在高分辨率屏幕上没有像素化。 它们可以根据需要按比例放大而不会模糊。 其次，它们的许多属性都可以使用CSS直接控制。 您可以更改它们的大小和颜色，或使用几行CSS来应用文本阴影。 它们也比图像精灵更易于使用。
Before getting too deep into icon fonts, if you are starting a new web design from scratch, keep in mind that using SVG images might be a better approach. We’ve explored a comparison of the two approaches here at SitePoint in the past. SVG images have some clear advantages, for example, you can create multi-color icons and your SVG images can also look sharper than icon fonts. On the other hand, if your project needs to support legacy browsers or your team has not yet taken the step of changing its workflow to accommodate SVG icons, it is worth looking into ways in which it’s possible to optimize the use of icon fonts at least.
在深入研究图标字体之前，如果您要从头开始进行新的Web设计，请记住使用SVG图像可能是一种更好的方法 。 过去，我们在SitePoint上探索了这两种方法的比较。 SVG图像具有一些明显的优势，例如，您可以创建多色图标，并且SVG图像看起来也比图标字体更清晰。 另一方面，如果您的项目需要支持旧版浏览器，或者您的团队尚未采取更改其工作流程以适应SVG图标的步骤，那么值得探讨的方法至少可以优化图标字体的使用。 。
If you have worked with icon fonts before, you have most probably used or heard about Font Awesome. In version 4.7, Font Awesome provides 675 different icons for users to use in their projects. The icons provided by this font range from Facebook and Twitter icons to objects like a bathtub and thermometer. The only problem? You won’t probably use all 675 icons in a single project. Loading the whole font file just to use about 10 or 20 icons increases the page load time unnecessarily. This issue is not specific to just Font Awesome but most icon fonts in general.
如果您以前使用过图标字体，则最有可能使用或听说过Font Awesome 。 在4.7版中，Font Awesome提供了675个不同的图标供用户在其项目中使用。 该字体提供的图标范围从Facebook和Twitter图标到浴缸和温度计等对象。 唯一的问题？ 您可能不会在单个项目中使用所有675个图标。 仅使用大约10或20个图标加载整个字体文件会不必要地增加页面加载时间。 此问题不仅限于“真棒字体”，而且一般还包括大多数图标字体。
In this tutorial, you will learn about Fontello. It is a great service that is free to use and allows you to create icon fonts from vector images. You can also combine icons from multiple open source projects like Font Awesome, Entypo and Typicons in a single file.
在本教程中，您将了解Fontello 。 这是一项很棒的服务，可以免费使用，并允许您从矢量图像创建图标字体。 您还可以将来自多个开源项目(如Font Awesome， Entypo和Typicons)的图标合并到一个文件中。
The first step in creating your own font is selecting all the icons that you need from the Fontello homepage. Let’s say you want to use font icons with social media buttons. You can start by selecting icons for Facebook, Twitter, Pinterest and LinkedIn.
创建自己的字体的第一步是从Fontello 主页中选择所需的所有图标。 假设您要使用带有社交媒体按钮的字体图标。 您可以先选择Facebook，Twitter，Pinterest和LinkedIn的图标。
Once you have selected all the icons, you can click on the “Customize Names” tab to change the name of icons. For example, the Facebook icon has the name icon-facebook but you can change it to icon-fb if you wish.
选择完所有图标后，您可以单击“自定义名称”选项卡来更改图标的名称。 例如，Facebook图标的名称为icon-facebook但是您可以根据需要将其更改为icon-fb 。
The prefix icon- can also be changed by clicking on the settings button.
前缀icon-也可以通过单击设置按钮来更改。
After changing the names, you can also change the codes for each of these icons. Do you see the “social-media” written in top right corner in the above image? This is the name that will be used while generating your font files.
更改名称后，您还可以更改每个图标的代码。 您是否在上图的右上角看到“社交媒体”字样？ 这是生成字体文件时将使用的名称。
Once you are satisfied with the icons and their names, you can click on the download webfont button to download the fonts.
对图标及其名称满意后，可以单击“下载网络字体”按钮以下载字体。
You can extract the download zip file to start using the icons. Upon extraction, you should see two folders named “css” and “fonts”. There should also be a “config.json” file. This file contains all the configuration information of your fonts. If you want to make changes to an existing project, you can directly drag this file to the Fontello page or import it by going to Settings > Import.
您可以解压缩下载的zip文件以开始使用图标。 解压缩后，您应该看到两个名为“ css”和“ fonts”的文件夹。 还应该有一个“ config.json”文件。 该文件包含字体的所有配置信息。 如果要更改现有项目，可以直接将此文件拖到Fontello页面或通过转到Settings > Import导入它。
To use the icons, you should copy all the files to your own project directory. Make sure that you keep the folder structure intact. This will simplify the process of making any changes to the font in future.
要使用图标，应将所有文件复制到自己的项目目录中。 确保您保持文件夹结构完整。 这将简化以后对字体进行任何更改的过程。
You can then include the “social-media.css” file in your project. The icons can be used on your webpage by adding <i class="icon-classname"></i> to the markup. Here, icon-classname is the name of the icon you want to show.
然后，您可以在项目中包含“ social-media.css”文件。 通过将<i class="icon-classname"></i>到标记中，可以在网页上使用这些图标。 在这里， icon-classname是要显示的图标的名称。
Fontello has a lot of icons for you to choose from. There are icons for different kind of weather, social sites, graphs and much more. However, it is still possible that the icon you are looking for is not offered by any of the icon fonts.
Fontello有很多图标供您选择。 有用于不同类型天气的图标，社交网站，图表等等。 但是，任何一种图标字体仍可能不提供您要查找的图标。
You can import custom fonts and images to Fontello in SVG format. If your font is in TTF / OTF or WOFF format, you can convert it to SVG using tools like FontForge.
您可以将自定义字体和图像以SVG格式导入到Fontello。 如果您的字体为TTF / OTF或WOFF格式，则可以使用FontForge之类的工具将其转换为SVG。
When importing SVG images, you need to make a few changes to your SVG for it to be converted properly. You will have to remove all the fills and colors from it. Similarly, there should not be any complex rules like the evenodd fills. You also need to remove FAT line attributes and join all contours to a single outline. This page describes the process of preparing images for import in more detail.
导入SVG图像时，您需要对SVG进行一些更改以使其正确转换。 您将必须从中删除所有填充和颜色。 同样，应该没有像evenodd fills这样的复杂规则。 您还需要删除FAT线属性，并将所有轮廓连接到单个轮廓。 该页面更详细地描述了准备导入图像的过程。
Using Fontello can reduce page weight significantly. If you are using Font Awesome version 4.7, the font file loaded by the browser is about 75kb in size. However, the font file created with Fontello was only 4kb in size in my case.
使用Fontello可以显着减少页面重量。 如果使用的是Font Awesome 4.7版，则浏览器加载的字体文件大小约为75kb。 但是，就我而言，用Fontello创建的字体文件只有4kb。
Here are the icons that I used:
这是我使用的图标：
See the Pen Fontello Icon Fonts by SitePoint (@SitePoint) on CodePen.
见笔Fontello图标字体由SitePoint( @SitePoint上) CodePen 。
Of course, the gains may vary depending on how many icons you need to load. I was loading eight different icons and the gain was about 70kb. In certain situations, a website might be loading two different font files to load weather and social media icons. If they don’t have to use all the weather and social icons, they can use Fontello to combine the fonts in a single file. In addition to reducing page weight, they will also be reducing the number of requests made by the browser.
当然，增益可能会有所不同，具体取决于您需要加载多少个图标。 我正在加载八个不同的图标，增益约为70kb。 在某些情况下，网站可能正在加载两个不同的字体文件以加载天气和社交媒体图标。 如果他们不必使用所有天气和社交图标，则可以使用Fontello将字体合并到一个文件中。 除了减轻页面重量之外，它们还将减少浏览器发出的请求数量。
Besides the performance gains, the service also allows you to give a uniform name to your icons. For example, Font Awesome prefixes fa- to all its icons. Other icon fonts might do the same. If you are using multiple icon fonts, you will have to keep track of different prefixes. With Fontello, you can assign a single prefix of your own choice to all the icons.
除了提高性能外，该服务还允许您为图标指定一个统一的名称。 例如，Font Awesome为其所有图标添加fa-前缀。 其他图标字体可能会执行相同的操作。 如果使用多种图标字体，则必须跟踪不同的前缀。 使用Fontello，您可以为所有图标分配一个自己选择的前缀。
If you just want to use a selection of font icons from the built-in ones available on Fontello, the process of creating a custom icon font is very simple. It will only take 10 to 15 minutes and the gains are worth the effort.
如果您只想使用Fontello提供的内置字体图标中的一种，则创建自定义图标字体的过程非常简单。 仅需10到15分钟，而付出的努力是值得的。
If you are uploading the font files that you created on a separate domain, you will have to make sure that the server responds with proper CORS headers. This can be done by adding the following lines in your .htaccess —
如果要上载在单独域中创建的字体文件，则必须确保服务器以正确的CORS标头响应。 这可以通过在.htaccess添加以下几行来完成：
<FilesMatch ".(eot|ttf|otf|woff|woff2)"> Header set Access-Control-Allow-Origin "*" </FilesMatch>If you have to upload files on a different domain and can’t set the CORS headers either, you can embed the font files directly into the CSS. Fontello already creates such a file for you when you download the generated font. All you have to do is include it in your projects.
如果您必须在其他域上载文件并且也不能设置CORS标头，则可以将字体文件直接嵌入CSS中。 当您下载生成的字体时，Fontello已经为您创建了这样的文件。 您要做的就是将其包含在您的项目中。
You can also set the right mime-type for all the font files by adding the following lines to your .htaccess file —
您还可以通过向.htaccess文件中添加以下几行来为所有字体文件设置正确的mime类型：
AddType application/x-font-ttf ttc ttf AddType application/x-font-otf otf AddType application/font-woff woff AddType application/font-woff2 woff2 AddType application/vnd.ms-fontobject eotIf you know a good icon font, you can suggest it to Fontello for them to include in their list of fonts on the Homepage. However, the font should meet specific requirements. It should have an acceptable open source license. The icons should look good at small sizes. Additionally, the font should have at least 40 icons in its set.
如果您知道一种好的图标字体，则可以向Fontello建议，以使他们包括在主页上的字体列表中。 但是，字体应符合特定要求。 它应该具有可接受的开源许可证。 小尺寸的图标应该看起来不错。 此外，字体应至少包含40个图标。
The last requirement will probably be lifted in future when the process of adding fonts becomes fully automated. You can read more about the process here.
当添加字体的过程变得完全自动化时，将来的最后一个要求可能会取消。 您可以在此处阅读有关该过程的更多信息。
In this tutorial, you learned how to use Fontello to create custom icon fonts for your projects. If you think that reducing the page weight by about 70kb is not worth the trouble, keep in mind that these saving along with other such optimizations can quickly add up to reduce the page weight significantly.
在本教程中，您学习了如何使用Fontello为项目创建自定义图标字体。 如果您认为将页面权重降低70kb左右是不值得的，请记住，这些节省以及其他类似的优化措施很快就会加起来，从而大大降低了页面权重。
Are there any other services similar to Fontello that you use to load custom icon fonts? Do you have any tips for the readers? Let us know in the comments.
还有用于加载自定义图标字体的类似于Fontello的其他服务吗？ 您对读者有什么建议吗？ 让我们在评论中知道。
翻译自: https://www.sitepoint.com/using-fontello-to-only-load-font-icons-that-you-need/
相关资源：jdk-8u281-windows-x64.exe