grunt - 构建 eot、woff、ttf 和 svg答案

【问题标题】：grunt - build eot, woff, ttf and svggrunt - 构建 eot、woff、ttf 和 svg
【发布时间】：2014-10-26 10:45:08
【问题描述】：

我已经使用 grunt 构建了我的 javascript 项目。它适用于 javascript 和 css 文件。请在下面找到我的 CSS 类之一。

@font-face {
  font-family: 'demo_icons';
  src: url('../font/demo_icons.eot?79280179');
  src: url('../font/demo_icons.eot?79280179#iefix') format('embedded-opentype'),
       url('../font/demo_icons.woff?79280179') format('woff'),
       url('../font/demo_icons.ttf?79280179') format('truetype'),
       url('../font/demo_icons.svg?79280179#demo_icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

我在font 目录中拥有所有这些文件。目前我需要在构建版本中提供这个图标。我不想在我的构建版本中使用这个图标文件。反正有没有把它集成到css中？？？

如何在 grunt build 中处理 eot、woff、ttf 和 svg ???

【问题讨论】：

标签： svg build gruntjs truetype eot

【解决方案1】：

将每个文件的数据转换为 base64 并通过data uri 将其直接嵌入到 CSS 中。

src url('data:[<MIME-type>];base64,<data>')

例如，对于 SVG 字体，MIME 类型将是 image/svg+xml。

【讨论】：