将 HTML、CSS、JS 和资产合并到一个文件中答案

【问题标题】：Merge HTML, CSS, JS and Assets to one file将 HTML、CSS、JS 和资产合并到一个文件中
【发布时间】：2015-03-27 12:59:48
【问题描述】：

我目前正在做一个小实验。

这是关于拥有某种用 C# 编写的“模拟器”，它可以运行一些用 HTML（CSS、JS、..）编程的“ROM”。

为了构建 ROM，我编写了一个小“编译器”，它使用我的基于 JS 的游戏引擎，它是一个编辑器，用于将游戏/应用程序打包成一个基本上只是加密的文件（“ROM”）（或纯）JSON 文件，包含完整的 HTML 代码（在其属性之一中），但链接文件直接写入其中。

<script src="./script/main.js"></script>

会变成：

<script> ...code... </script>

CSS 也是如此。

图片会转成Base64字符串

<img src="http://www.img.com/img.png"/>

变成

<img src="data:image/png;base64, R0lGODlhmwD....."/>

我的问题是将字体文件包含到 CSS 或 HTML 文件中。

所以可能是这样的

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/K88pR3goAWT7BTt32Z01m1tXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}

变成

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans'), local('OpenSans'), url( ...magic... ) format('woff2');
}

有谁知道这是否可行，如果可以，我该如何实现该功能？

感谢您的建议。

【问题讨论】：

我认为你本质上是asking for this？
@JamesThorpe 实际上就是在写那个。秒杀我
哦，是的，我可以想象得到。谢谢你们。
我目前正在寻找一种可以执行您所描述的工具，即自动将多个源放入一个 html 文件中。您有可以分享的解决方案吗？

标签： javascript html css ajax file

【解决方案1】：

这应该可行：

@font-face{
 font-family: 'Open Sans';
 src: url(data:font/ttf;base64,AAEA… ) format('truetype');
}

在这里找到：http://blog.patdavid.net/2012/08/embedding-fonts-with-css-and-base64.html

【讨论】：

谢谢你。我没有把答案这么简单:) 现在我觉得很愚蠢，