我正在尝试从 fontawesome 的 svg 文件 (fontawesome-webfont.svg) 中提取 SVG 文件,以便我只能使用特定字体并使用 fontcustom 创建自己的自定义字体。所有这些都是为了减少字体文件的大小,因为我没有使用所有 300 个左右的 fontawesome 图标,而只是少数。
如何为现有图标提取 SVG 文件?我尝试了很多组合,其中之一是:
从 font-awesome.min.css,我知道图标日历是:
.icon-calendar:before { content: "\f073"; }
接下来,从 fontawesome-webfont.svg 中,我复制了以 d=" 开头的图标日历的字形代码,并创建了一个新的 SVG 文件(通过前缀路径)calendar.svg 以供 fontcustom 使用。
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M128 -128h288v288h-288v-288zM480 -128h320v288h-320v-288zM128 224h288v320h-288v-320zM480 224h320v320h-320v-320zM128 608h288v288h-288v-288zM864 -128h320v288h-320v-288zM480 608h320v288h-320v-288zM1248 -128h288v288h-288v-288zM864 224h320v320h-320v-320z M512 1088v288q0 13 -9.5 22.5t-22.5 9.5h-64q-13 0 -22.5 -9.5t-9.5 -22.5v-288q0 -13 9.5 -22.5t22.5 -9.5h64q13 0 22.5 9.5t9.5 22.5zM1248 224h288v320h-288v-320zM864 608h320v288h-320v-288zM1248 608h288v288h-288v-288zM1280 1088v288q0 13 -9.5 22.5t-22.5 9.5h-64 q-13 0 -22.5 -9.5t-9.5 -22.5v-288q0 -13 9.5 -22.5t22.5 -9.5h64q13 0 22.5 9.5t9.5 22.5zM1664 1152v-1280q0 -52 -38 -90t-90 -38h-1408q-52 0 -90 38t-38 90v1280q0 52 38 90t90 38h128v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h384v96q0 66 47 113t113 47 h64q66 0 113 -47t47 -113v-96h128q52 0 90 -38t38 -90z"
style="fill:#000000;fill-opacity:1;stroke:none" />
</svg>
如果我不包含 style=fill 行,那么 SVG 将不会在浏览器中呈现,因此 fontcustom 将创建一个空白 TTF 文件。
到目前为止,一切都很好。所以能够手动创建一个 SVG 文件,并运行 fontcustom 脚本来生成 fontcustom.css 和其他字体文件。但是,现阶段存在多个问题:
结果图标的大小与我使用 font awesome 的大小不同。它相当大。这与在 SVG 中指定我缺少的某些内容有关。但我不知道从哪里复制它!
一些图标是旋转的。例如,星形图标会略微旋转。
.icon-star-empty:before { 内容: "\f006"; }
它必须与手动创建的单个 SVG 文件有关。我错过了什么?还是有别的东西?