如何在 Flutter 中将带有自定义字体（例如 Baybayin Script）的文本复制到剪贴板？

Question

我正在开发一个 Flutter 应用程序，它将文本从拉丁文字音译为 Baybayin。输出使用 Baybayin Neue 字体显示，我希望用户能够在 Baybayin 中复制此输出并将其粘贴到其他应用程序中，同时保留自定义字体样式。

目前，我使用 Flutter 中的

Clipboard

API 来复制文本。文本在 Baybayin 脚本 (Unicode) 中正确复制，但当粘贴到其他应用程序时，它以系统的默认字体显示，而不是我在应用程序中使用的 Baybayin Neue 字体。

我尝试过的：

• 使用

  Clipboard.setData(ClipboardData(text: baybayinText));

  ，复制文本但不复制字体。
• 考虑将文本转换为图像，但这会使文本不可编辑。

我需要什么：

有没有办法使用自定义字体样式（Baybayin Neue）复制文本，以便当用户将文本粘贴到另一个应用程序（如文本编辑器或社交媒体）时，它保留Baybayin Neue字体？

我想到的可能的解决方案：

1. 复制为 Flutter Web 的富文本或 HTML/CSS（但不确定如何实现）。
2. 将文本复制为图像（但会失去编辑能力）。

这是可以使用 Flutter 完成的事情，还是需要通过包或解决方法来处理？任何建议或见解将不胜感激！

Answer 1

复制为富文本（Web 的 HTML）：在 Flutter Web 上，您可以尝试将文本复制为 HTML（使用内联 CSS 字体），某些基于 Web 的应用程序可能会遵循这一点。但是，这并不适用于所有平台。您可以结合使用 Flutter Web 的 JS 互操作来处理剪贴板中的富文本复制。

示例：

import 'dart:html' as html;

void copyAsHtml(String text) {
 final html.TextAreaElement textArea = html.TextAreaElement();
 textArea.value = '<span style="font-family: \'Baybayin 
 Neue\';">$text</span>';
 html.document.body?.append(textArea);
 textArea.select();
 html.document.execCommand('copy');
 textArea.remove();
}

此方法尝试使用内联样式复制文本，但它仅适用于支持富文本粘贴的情况，例如某些文本编辑器或网络应用程序。

或者，您也可以使用 universal_html 包来实现相同的功能