fontawesome subset

Love Fontawesome，但不需要在网站的每一页上捆绑成千上万的图标吗？我也是。 fontawesome-subset是一种用于创建Fontawesome子集的实用程序，以在网络上优化使用。它可以通过使用您使用的字形名称（ angle-left ， caret-up等）并仅使用所需的字形创建优化的字体来起作用。是的，SVG图标和片段更加典型，功能更大 – 但是，如果您已经使用了使用WebFont构建的网站 – 为什么要切换 – 对吗？

安装

首先，安装fontawesome-subset：

npm install --save-dev fontawesome-subset

其次，安装计划使用的Fontawesome版本。当前支持版本> = 5.12.0。如果您使用的是Pro版本，请参见下文。对于免费版本，请使用以下内容：

npm install --save-dev @fortawesome/fontawesome-free

用法

通过您喜欢的任务跑步者跑步：

 // Import fontawesome-subset
import { fontawesomeSubset } from \"fontawesome-subset\" ;

// Create or append a task to be ran with your configuration
fontawesomeSubset ( [ \"check\" , \"square\" , \"caret-up\" ] , \"sass/webfonts\" ) ;

完整的选项

fontawesomesubset（子集，output_dir，选项）

subset – 包含要为solid样式生成的图标标识符（图标或字形名称，Unicode值或支持的别名）的数组。这也可以是具有不同FA样式的键 – >值对的对象（固体，常规，品牌，光，duotone面，尖锐的固体）。这些子集中的某些图标只有与fontawesome Pro一起使用时可用（见下文）。
output_dir您希望将WebFonts生成的目录相对于当前的NPM进程。例如： sass/webfonts
options – 选项的对象，以进一步自定义工具。
- package – free或pro 。默认为free版本。有关专业说明，请参见下文。
- targetFormats一个或多个格式的字符串阵列要导出。可用选项： woff woff2 sfnt （ ttf ）。默认为woff2 ＆ sfnt 。

使用Fontawesome Pro

Fontawesome（FA）Pro提供了许多其他图标以及您可以使用的其他字体重量和样式。显然，您需要拥有FA的“ Pro”版本才能与此子集工具一起使用。如果您已经购买了许可证，请遵循安装说明，以使Fontawesome Pro启动并通过NPM运行。

安装后，您可以为fontawesomeSubset的subset参数提供其他信息，以创建用于特定字体样式的家庭。请确保在选项参数中包含package: 'pro'参数，以从Pro源生成，并为不同的权重 /样式启用字体创建。

为“常规”和“固体”样式生成单独的字形的示例：

 fontawesomeSubset (
    {
        regular : [
            \"check\" ,
            \"square\" ,
            \"caret-up\" ,
            \"f007\" /* fa-user unicode */ ,
            \"add\" /* fa-plus alias */ ,
        ] ,
        solid : [ \"plus\" , \"minus\" ] ,
    } ,
    \"sass/webfonts\" ,
    {
        package : \"pro\" ,
    }
) ;

您可以使用Fontawesome Pro提供的任何权重 /套件，包括solid ， regular ， light ， brands ， duotone ， sharp-*和sharp-duotone-* 。您可以混合匹配，并提供与计划将其修剪掉尽可能多的字形。请参阅types.ts中支持子集的完整列表。

上面的示例将输出具有以下结构的目录：

 /sass/
    /webfonts/
        fa-regular-400.ttf
        fa-regular-400.woff2
        fa-solid-900.ttf
        fa-solid-900.woff2

您仍然由您确定所需的字形并将其传递到函数以生成WebFonts。我建议还要优化您的CSS文件，以从工具中获得最大收益。

与SCS / SASS一起使用

如果您已经在服务器上与NPM项目已安装了FA，则可以将output_dir指向您已经加载的WebFonts目录，并且脚本将使用新缩小 /优化的版本覆盖当前字体。如果您打算获得更多的细粒度，则可以随时编辑FA团队提供的_icons.scss文件，并删除您不使用的所有字形为最终用户节省更多KBS。

这是我在我从事的项目上使用SASS映射的glyph name- -> _variables.scss文件中使用的SASS映射的项目上的_icons.scss文件的示例：

 $icons : (
    shopping-cart : $fa-var-shopping-cart ,
    chevron-right : $fa-var-chevron-right ,
    chevron-left : $fa-var-chevron-left ,
    chevron-down : $fa-var-chevron-down ,
    check-square : $fa-var-check-square ,
    square : $fa-var-square ,
    caret-up : $fa-var-caret-up ,
    plus : $fa-var-plus ,
    minus : $fa-var-minus ,
    times : $fa-var-times ,
    search : $fa-var-search ,
    check : $fa-var-check ,
);

@each $key , $value in $icons {
    . #{ $fa-css-prefix } - #{ $key } :before {
        content : fa-content ( $value );
    }
}

fontawesome subset