如何从 SVG 图标生成 webfont

Question

有谁知道如何从 SVG 图标生成 webfont。我在我的项目中使用了 webpack、angular2 和 typescript。

有人可以告诉我如何实现这一目标吗？我没有通过互联网得到任何东西。请帮帮我！！

code here doesn't have too many information

我想为下面的 svg 图标生成 webfont。提前致谢

Answer 1

https://github.com/FontCustom/fontcustom 是一个从 SVG 输入文件生成网络字体的好工具。

当与 Vagrant 结合使用时（或者也可能 Docker，但到目前为止我还没有尝试过 Docker），你可以构建一个不错的，fully-automated icon-generating 工作流程。

Answer 2

我用 webfonts-generator 插件实现了这个

第一步：

添加"webfonts-generator": package.json
在 src 下创建一个文件夹图标，并将所有 svg 文件放在那里
将以下代码添加到您的 webpack.common.js 文件

webpack.common.js

const webfontsGenerator = require('webfonts-generator');
webfontsGenerator({
    files: [
         'src/icon/search.svg',
         'src/icon/error.svg',
         'src/icon/warning.svg'
      ],
    dest: 'custom-fonts/',
    fontName: 'custom-icons',
    html: true,
    templateOptions: {
      baseClass: 'custom',
      classPrefix: 'custom-'
    }
}, function(error) {
    if (error) {
      console.log('Fail!', error);
    } else {
      console.log('Done!');
  }
});  

module.exports = {
loaders: [
  {
   test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
   loader : 'file-loader'
  }
]
}

构建后，webfonts-generator 插件将创建一个名为 "custom-fonts" 的文件夹并生成 css、eot、ttf、html 页面等。
通过导入生成的 css 文件，您可以使用自定义字体

Something.html

<i class="custom custom-search"></i>

O/P

参考：

Generator of webfonts from svg icons

Automated webfont generation from SVG icons.

如何从 SVG 图标生成 webfont

how to generate webfont from SVG icons

svg

webfonts

typescript

webpack

angular