使用Fontello仅加载您需要的图标字体

> fontello：创建轻量级自定义图标字体

Fontello是一项免费的，用户友好的服务，用于从矢量图像制作自定义图标字体。 它通过将来自各种开源项目（例如Awesome，Entypo和tescicons）的图标合并到一个紧凑的文件中来简化Web开发。这大大减少了页面加载时间并改善了整体网站性能。

>图标字体比标准图像具有多个优点：它们在高分辨率屏幕上易于使用CSS（尺寸，颜色，阴影）设计，并且比图像精灵更容易管理。 但是，对于新项目，SVG图像可能是一种优越的替代方案，它提供了多色功能和更清晰的视觉效果。 如果传统浏览器支持或工作流约束需要图标字体，则优化其使用至关重要。

>通过流行的图标字体库（如字体Awesome（4.7，〜75KB））的挑战是，大多数项目仅利用一小部分可用图标。 不必要地加载整个库会增加页面重量。 fontello通过允许您选择

所需的图标来解决此问题。

创建自定义字体

1. 图标选择：>从fontello主页中选择您所需的图标。
2. 自定义：>“自定义名称”选项卡可让您重命名图标（例如，更改为icon-facebook>icon-fb）。 设置按钮允许前缀修改（例如，更改默认的icon-前缀）。 您还可以调整单个图标代码。
3. >>下载：>一旦满足，下载生成的字体文件。

集成字体

1. 提取：提取下载的zip文件。您会找到“ CSS”，“ FONTS”文件夹和“ config.json”文件（包含字体配置）。
>
2. import（可选）：对于现有项目，将“ config.json”文件拖到fontello页面上，或通过设置＆gt;导入。
3. >>文件放置：将所有文件（维护文件夹结构）复制到您的项目目录中。>
>
4. css包含：在您的项目中包含生成的CSS文件（例如，）。social-media.css
5. 用法：>用格式在您的html标记中使用图标，用图标的名称替换<i class="icon-classname"></i>。 icon-classname
使用自定义图像

> Fontello提供了一个庞大的库，您可以导入自定义SVG图像。 确保您的SVG适当准备：删除填充物，颜色，复杂的规则（例如

填充）和胖线属性；将轮廓加入单一轮廓。

evenodd性能获得

Fontello大大减少了文件大小。 在一个示例中，一个字体很棒的4.7文件（75kb）被简化为4KB fontello文件（使用八个图标）。 储蓄取决于使用的图标数量。 这可以最大程度地减少HTTP请求并提高加载速度。 此外，Fontello允许在多个字体上具有一致的图标前缀，从而简化了管理。

高级配置

>

CORS标题：

如果在单独的域上托管字体文件，请在>

• .htaccess>字体模仿类型：
在您的

>中设置正确的MIME类型：

<filesmatch "\.(ttf|otf|woff|woff2|eot)$">
  Header set Access-Control-Allow-Origin "*"
</filesmatch>

• 结论 .htaccessfontello简化了创建轻巧的自定义图标字体。 即使是看似小的文件大小减少，也会积累以显着提高网站性能。 考虑使用它来优化图标字体工作流程。

以上是使用Fontello仅加载您需要的图标字体的详细内容。更多信息请关注PHP中文网其他相关文章！