如何将textarea中自定义字体的文本保存为文件且避免转成系统默认字体

核心需求 #

需要将textarea区域内、通过专属自定义字体渲染显示的文本，导出为可完整保留原字体视觉效果的文件，避免导出的文件打开时被系统默认字体替换显示样式。

注：此处用到的自定义字体不属于现有通用字体家族，已将所需字符转换为目标样式打包为独立.ttf文件，且该字体本身不包含常规英文字符。

现有实现基础 #

• 已完成页面侧的字体引入：通过CSS@font-face规则配置字体加载路径，基于HTML搭建了配套自定义键盘的textarea交互区域，键盘输入的字符会直接在textarea内以自定义字体样式展示
• 已明确纯文本格式本身不携带样式信息，直接导出纯文本必然会丢失自定义字体效果，试过多种实现方案均未达到预期
• 可接受的导出文件格式包含txt、png、pdf或其他能完整保留自定义字体视觉效果的格式，无强制格式要求

当前方案存在的问题 #

现在采用Blob生成纯文本文件的方式做导出，最终保存的文件打开后全是系统默认字体显示的常规字符，完全丢失自定义样式效果。需要可落地的更优实现方案。

实现约束 #

需要开发长期可稳定运行的功能，尽可能将所有逻辑内置在前端代码中，最大程度降低终端用户的操作成本，不需要用户额外安装插件、做手动配置。

现有代码片段 #

前端保存逻辑

$(document).ready(function () {
  function saveTextAsFile() {
    var text = document.getElementById("write").value;
    // 前期测试尝试过的文本取值、临时绑定字体样式逻辑
    // var text = document.getElementById('<span style="font-family:myFont">write</span>').value
    // document.getElementById("write").style.fontFamily =  "myFont";
    var textFileAsBlob = new Blob([text], { type: 'text/plain' });
    var fileName = "NewFile.txt";
    var downloadLink = document.createElement("a");

    downloadLink.download = fileName;
    downloadLink.innerHTML = "Hidden Link";
    window.URL = window.URL || window.webkitURL;
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
    downloadLink.click();
  }
});

页面结构

<head>
  <!-- 上述JS逻辑所在位置 -->
</head>
<body>
  <div id="container" class="harlow">
    <textarea id="write" rows="6" cols="60"></textarea>
    <!-- 配套自定义键盘的所有按键列表放置在此处 -->
  </div>
</body>

字体配置CSS

@font-face {
  font-family: "myFont";
  src: url("../font/myFont.ttf") format('embedded-opentype'), 
      url('../font/myFont.ttf') format('woff2'),
      url('../font/myFont.ttf') format('woff'), 
      url('../font/myFont.ttf')  format('truetype'),
      url('../font/myFont.ttf') format('svg'); 
  font-display: optional;
}
.harlow {
  font-family: "myFont";
}

内容的提问来源于stack exchange，提问作者Shivika P