{#each font_list as font, i} {@html ""} {/each}

web font 字体裁剪工具

<div class="flex justify-evenly">
  <textarea
    bind:value={text}
    class="border flex-1 m-1"
    placeholder="在此输入需要提取的文字 在右侧选择字体 然后点击下方的生成字体按钮"
    cols="40"
    rows="3" />
  <div class="flex-1 m-1 flex flex-wrap">
    {#each font_list as font, i}
      <div
        on:click={e => (font.selected = !font.selected)}
        class="c-label {font.selected ? 'c-label-selected' : ''}
        {font.name}">
        {font.name}
      </div>
    {/each}
  </div>
</div>

<div class="flex border ml-2 items-end">
    <div
      on:click={e => request_method="post"}
      class="c-label {request_method==="post" ? 'c-label-selected' : ''}">
      使用 post 请求
    </div>
    <div
      on:click={e => request_method="get"}
      class="c-label {request_method==="get" ? 'c-label-selected' : ''}">
      使用 get 请求
    </div>
    <div class="text-sm">* 具体区别请打开控制台查看请求</div>
  </div>

</div>

{#each selected_font as font, i}
  <div class={font.name}>
    <div style="font-size:2rem">{text}</div>
    <div class="flex justify-end items-center text-xs">
      {#if font.css}
        <a class="text-blue-400 underline" href="/{font.zip}">下载压缩资源</a>
        <div  class="c-label mx-1 text-xs" on:click={copy(font.css)}>复制css</div>
      {/if}

<div>{font.name}</div>
    </div>
  </div>
{/each}

<h2 class="text-lg text-center my-3  font-bold"> 动态生成字体（generate_fonts_dynamically 接口）</h2>
<p class="ml-1">使用如下的方式引入，则可以直接使用</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}