规范化SVG图标和Web字体

Question

规范化SVG图标和Web字体

3

我有一堆由我的图形设计师提供的SVG格式图标。这些图标将用于应用程序和网站。在将它们用于网站时，我想将它们优化并转换为Web字体。因为我已经在使用grunt，所以我决定使用grunt webfont插件。它将所有内容转换为Web字体，我可以轻松调用并使用“font-size”属性进行调整大小。然而，现在我遇到了几个问题：

似乎所有图标的基线不同。有些比常规基线高得多，而有些则低于基线。请参见下面的屏幕截图：
在某些情况下，当使用字体时，它们似乎在元素下方添加了额外的空间，从而扰乱了间距。这似乎与line-height/font-size属性有关。如果我使字体大小更小，则额外的间距会消失，但在这种情况下，字体图标几乎看不见。我通过在父容器上使用overflow:hidden解决了这个问题：
最后，某些图标与其他图标相比显得更轻/更小。

经过调查，我发现问题所在——源SVG文件的大小不同。有些甚至在图形周围有白色框或空白空间，如下所示。

鉴于上述情况，是否有办法：

规范化所有文件的大小，而无需编辑源SVG（例如使用Illustrator或Inkscape）
确保所有图标具有相同的基线
从SVG文件中删除图标周围的白色/空白框。

以上是否可以通过插件而无需编辑源文件来实现？还是我必须逐个编辑每个文件？

提前感谢您的帮助。

- MojoJojo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kaiido · Accepted Answer

我不太了解grunt，但也许svg-sprite插件是您要找的。

或者，您可以在illustrator中制作批处理过程。我假设Inkscape中有类似的选项。

下面是Illustrator CC中可用于步骤1和2的操作示例。将其保存到myActions.aia中，然后在Illustrator>操作窗口>▸选项面板>加载操作...中导入它。

/version 3
/name [ 12
 416c69676e2b726573697a65
]
/isOpen 1
/actionCount 1
/action-1 {
 /name [ 10
  616c69676e2b53697a65
 ]
 /keyIndex 0
 /colorIndex 0
 /isOpen 1
 /eventCount 3
 /event-1 {
  /useRulersIn1stQuadrant 0
  /internalName (adobe_selectAll)
  /localizedName [ 10
   53656c65637420416c6c
  ]
  /isOpen 0
  /isOn 1
  /hasDialog 0
  /parameterCount 0
 }
 /event-2 {
  /useRulersIn1stQuadrant 0
  /internalName (ai_plugin_alignPalette)
  /localizedName [ 9
   416c69676e6d656e74
  ]
  /isOpen 0
  /isOn 1
  /hasDialog 0
  /parameterCount 1
  /parameter-1 {
   /key 1954115685
   /showInPalette 4294967295
   /type (enumerated)
   /name [ 21
    566572746963616c20416c69676e20426f74746f6d
   ]
   /value 6
  }
 }
 /event-3 {
  /useRulersIn1stQuadrant 0
  /internalName (adobe_commandManager)
  /localizedName [ 16
   416363657373204d656e75204974656d
  ]
  /isOpen 0
  /isOn 1
  /hasDialog 0
  /parameterCount 3
  /parameter-1 {
   /key 1769238125
   /showInPalette 4294967295
   /type (ustring)
   /value [ 30
    46697420417274626f61726420746f20617274776f726b20626f756e6473
   ]
  }
  /parameter-2 {
   /key 1818455661
   /showInPalette 4294967295
   /type (ustring)
   /value [ 21
    46697420746f20417274776f726b20426f756e6473
   ]
  }
  /parameter-3 {
   /key 1668114788
   /showInPalette 4294967295
   /type (integer)
   /value 2164261256
  }
 }
}