Question

我们有一个包含许多SVG图标的网站。 gulp任务将它们转换为.eot，.ttf和.woff格式的图标字体。直到最近添加了两个新的字形时，一切都很顺利。

添加新图标后，现在大多数现有图标都呈现奇怪的球形关节，曲线应该是。例如，其中一个图标应如下所示：

但我们得到了这个：

可能导致这种情况的原因是什么？转换是使用gulp-iconfont完成的，svgicons2svgfont使用svg2ttf和<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><defs><style>.cls-1{fill:#333;}</style></defs><path class="cls-1" d="M596.06,140H564.15V105a35.1,35.1,0,0,0-35-35H467.46a35.1,35.1,0,0,0-35,35v35H267.52V105a35.1,35.1,0,0,0-35-35H170.84a35.1,35.1,0,0,0-35,35v35h-31.9A34,34,0,0,0,70,173.89v422.2A34,34,0,0,0,103.94,630H596.06A34,34,0,0,0,630,596.09V173.89A34,34,0,0,0,596.06,140Zm-122.73-9.11a17.55,17.55,0,0,1,17.5-17.5h14.95a17.55,17.55,0,0,1,17.5,17.5v38.28a17.55,17.55,0,0,1-17.5,17.5H490.83a17.55,17.55,0,0,1-17.5-17.5V130.87Zm-296.62,0a17.55,17.55,0,0,1,17.5-17.5h14.95a17.55,17.55,0,0,1,17.5,17.5v38.28a17.55,17.55,0,0,1-17.5,17.5H194.21a17.55,17.55,0,0,1-17.5-17.5V130.87ZM571.67,567a4.61,4.61,0,0,1-4.59,4.63H133a4.61,4.61,0,0,1-4.66-4.56V238a4.59,4.59,0,0,1,4.6-4.63H567a4.59,4.59,0,0,1,4.64,4.56V567Z"/><path class="cls-1" d="M249.56,435.78c10.67,0,15.11,5.51,15.11,14.93s-4.44,14.93-15.11,14.93H177c-9.42,0-15.11-7.11-15.11-14.76,0-11,2.67-16.71,35.38-39.47l16.89-11.73c8.71-6,11.91-11,11.91-18.31,0-8.71-5.87-14.4-15.47-14.4-20.27,0-9.78,24.71-29.87,24.71-12.8,0-17.42-7.11-17.42-17.24,0-17.07,16.71-35.2,48.35-35.2,37.87,0,51,20.62,51,40.35,0,14.93-7.47,25.6-23.29,35.56l-32.18,20.27v0.36h42.31Z"/><path class="cls-1" d="M323,440.23H281c-12.09,0-16.71-8.36-16.71-19,0-6.58,2.84-12.62,10.67-22l37.15-44.8c10.13-12.09,15.29-16.18,24.53-16.18,13.33,0,20.8,7.29,20.8,18.84v55.47c10.49,0,17.07,3.2,17.07,13.87,0,10.84-6.58,13.87-17.07,13.87v8.53c0,11.73-5.69,19.2-17.24,19.2S323,460.49,323,448.76v-8.53Zm0-66h-0.36l-29.15,38.22H323V374.27Z"/><path class="cls-1" d="M413.82,346.36c3.38-9.78,5.33-11.73,13.15-11.73,5.69,0,13,3.73,13,12.27,0,3.2-2,8.71-5,17.42l-32.71,92.62c-3.38,9.78-5.33,11.73-13.16,11.73-5.69,0-13-3.73-13-12.27,0-3.2,2-8.71,5-17.42Z"/><path class="cls-1" d="M456.66,370.36c-10.49,0-15.82-5.51-15.82-14.4s5.33-14.4,15.82-14.4H526c11,0,17.6,4.09,17.6,15.64,0,6.76-3.56,12.62-16,25.78-7.29,7.64-21.87,34.67-25.07,59.91C499.68,465.47,490.44,468,481.37,468c-7.82,0-15.82-7.11-15.82-16.36,0-23.11,27.38-69.86,40.53-81.24H456.66Z"/></svg>。我尝试调整选项，但似乎没有任何帮助。我甚至删除了新的字形并再次生成了字体，但一切看起来仍然很时髦。没有npm模块版本之间发生了变化。

以下是示例中图标的SVG代码供参考：

var iconfont = require('gulp-iconfont'),
  iconfontCss = require('gulp-iconfont-css'),
  order = require('gulp-order'),
  jsonfile = require('jsonfile'),
  tap = require('gulp-tap');

module.exports = function(gulp, plugins) {
  'use strict';

  return function() {
    var runTimestamp = Math.round(Date.now()/1000),
      fontName = 'customer-icons',
      iconPaths = ['src/assets/icons/iconfont/*.svg'],
      codepointFile = 'src/assets/icons/iconfont/glyphs.json',
      existingGlyphs = [],
      saveGlyphs = [],
      basePath = process.cwd();

    try {
      // If we already have a JSON of glyphs that have been assigned a codepoint,
      // load that data first so we can pass the icons in the same order to avoid
      // showing wrong icons when new ones are added.
      existingGlyphs = jsonfile.readFileSync(codepointFile).glyphs.concat(iconPaths);
    }
    catch(e) {} // No need to do anything, just use the default empty array.

    return gulp.src(iconPaths)
      .pipe(order(
        existingGlyphs, { base: basePath }
      ))
      .pipe(tap(function(file) {
        saveGlyphs.push(file.path.match(/(src\/assets\/icons\/iconfont\/.*)/)[1]);
      })).on('end', function() {
        jsonfile.writeFile(codepointFile, { glyphs: saveGlyphs }, function(err) {
          if(err !== null) {
            console.error('Error saving glyph file: ' + err);
          }
        })
      })
      .pipe(iconfontCss({
        fontName: fontName,
        path: 'scss',
        targetPath: '../../../base/iconfont.scss',
        fontPath: '/.resources/customer-ui-module/webresources/assets/fonts/customer-icons/'
      }))
      .pipe(iconfont({
        fontName: fontName,
        appendUnicode: true,
        fontHeight: 1001,
        normalize: true,
        formats: ['ttf', 'eot', 'woff'], // default, 'woff2' and 'svg' are available
        timestamp: runTimestamp, // recommended to get consistent builds when watching files
      }))
      .on('glyphs', function(glyphs, options) {
        // CSS templating, e.g.
        // console.log(glyphs, options);
      })
      .pipe(gulp.dest('src/assets/fonts/customer-icons'));
  };
}

这是我们的一项任务：

if

Iconfont突然崩溃

0 个答案: