💄 完善文档

README.md

@@ -17,10 +17,12 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于
 
 例如 如下图生成的字体包仅包含 「天地无极乾坤借法」
 ![界面预览](./doc_img/页面截图.jpg)
-
+```HTML
+<video src="./doc_img/功能演示.mkv" controls="controls" width:100% height:auto></video>
+```
 其体积自然十分之小
 
-![界面预览](./doc_img/体积展示.jpg)
+![体积展示](./doc_img/体积展示.jpg)
 
 2.另外可以生成 css 直接复制可用，部署在公网便可永久访问
 
@@ -69,8 +71,6 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于
 
 只支持生成 .ttf .eot .woff .svg 这几种格式
 
-如果 text 参数为空将会返回整个字体包
-
 ## 写项目时遇到的问题
 
 使用 svelte https://github.com/DeMoorJasper/parcel-plugin-svelte 通过这个插件使用 parcel 然后报 new 的错 需要限制 编译的版本，在package.json browserslist 字段限制一下版本就好

src/app.controller.ts

@@ -38,21 +38,21 @@ export class AppController {
     @Query('font') font: string,
     @Query('temp') temp: string,
   ) {
-    console.time()
     const type = req.url.match(/\.(.*)\?/)[1];
+    res.set({
+      'Content-Type': `font/${type}`,
+    });
+    if(!text)
+      return ' '
     const file = await this.appService.generate_fonts_dynamically(
       text,
       font,
       temp,
       type,
     );
-    res.set({
+
-      'Content-Type': `font/${type}`,
-    });
     const bufferStream = new Stream.PassThrough();
     bufferStream.end(file);
     bufferStream.pipe(res);
-    console.timeEnd()
-
   }
 }

static/App.svelte

@@ -8,6 +8,18 @@
   });
   /** 选择的文字 */
   let text = '';
+  /** 用于测试动态生成接口 */
+  let generate_fonts_dynamically=`<style>
+      @font-face {
+              font-family: "test";
+              src:
+                  url("/generate_fonts_dynamically.ttf?temp=true&font=优设标题黑&text=优设标题黑(直接改这里和前面的字体名看效果)") format("truetype");
+              /* iOS 4.1- */
+              font-style: normal;
+              font-weight: normal;
+          }
+      }
+</style>`
   $: selected_font = font_list.filter(font => font.selected);
   function generate_font() {
     selected_font.forEach(font => {
@@ -49,7 +61,7 @@
 {#each font_list as font, i}
   {@html "<style>"+font.css+'.'+font.name+"{font-family:"+font.family+"}</style>"}
 {/each}
-<h1 class="text-lg text-center mb-3">web font 字体裁剪工具</h1>
+<h1 class="text-lg text-center mb-3 font-bold">web font 字体裁剪工具</h1>
 <textarea id="copy_box" class="w-0 h-0 fixed -m-24" />
 <div class="flex justify-evenly">
   <textarea
@@ -89,3 +101,16 @@
     </div>
   </div>
 {/each}
+
+
+<h2 class="text-lg text-center my-3  font-bold"> 动态生成字体（generate_fonts_dynamically 接口）</h2>
+<p>使用如下的方式引入，则可以直接使用</p>
+<textarea
+  bind:value={generate_fonts_dynamically}
+  class="border flex-1 m-1 w-full text-lg"
+  placeholder="在此输入需要提取的文字"
+  rows="13"
+  style="font-family:test;" />
+{@html generate_fonts_dynamically}
+
+