将HTML，CSS，JS和Assets合并到一个文件 [英] Merge HTML, CSS, JS and Assets to one file

问题描述

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

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

---

 < script src =./ script / main.js >< /脚本> 
  

会变成：

 <脚本> ...代码...< / 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）格式（'woff2'）; 
 
 $ / code> 

变成



  @ font-face {
 font-family：'Open Sans'; 
 src：local（'Open Sans'），local（'OpenSans'），url（... magic ...）格式（'woff2'）; 
 
 $ / code> 





---

有谁知道这个是可能的，如果是这样，我该如何实现这一功能？

感谢您的建议。

解决方案

这应该可行：

  @ font-face {
 font-family ：'开放Sans'; 
 src：url（data：font / ttf; base64，AAEA ...）格式（'truetype'）; 
} 
  

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

I'm currently building a little experiment.

It's about having some sort of "emulator" written in C# that can run some "ROMs" that are programmed in HTML ( CSS, JS, .. ).

To build there ROMs, I've programmed a little "compiler" that is using my JS based game engine and it's editor to pack the game / application into a single file ( the "ROM" ) that is basically just an encrypted ( or plain ) JSON file that contains the full HTML code ( in one of its attributes ), except that linked files are directly written into it.

---

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

will turn into:

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

and the same with CSS.

---

Images will be turned into Base64 String

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

becomes

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

---

My problem is, to include font files into the CSS or HTML file.

So maybe something like this

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

becomes

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

---

Does anybody know if this is possible, and if so, how I can implement that functionality ?

Thank you for your suggestions.

解决方案

This should works:

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

Found here: http://blog.patdavid.net/2012/08/embedding-fonts-with-css-and-base64.html

这篇关于将HTML，CSS，JS和Assets合并到一个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！