Question

在网页textarea或div中，我想要显示空白，即将空格显示为小点∙，将标签显示为“⇥”，以及将新行显示为另一个字符。那样：

These are spaces
These   are tabs

将显示为：

These∙are∙spaces↵
These⇥are⇥tabs↵

这可以通过用“∙”等替换“”字符的javascript来完成，虽然这是一个混乱的解决方案，你必须处理捕获用户键入空格或粘贴。此外，如果用户对文本“这些是”进行查找（ctrl-f），她将找不到文本，因为空格实际上是∙chars。

相反，我发现了一个更清晰的解决方案：创建一个自定义字体，其中空间只是一个可见字符。它非常适合空间 - 不需要杂乱的javascript！但是，我无法弄清楚是否可以使用我发现的非常糟糕的免费字体编辑软件编辑字体中的制表符或换行符。

有没有人知道是否可以编辑字体中的标签和/或换行符，如果有，你能推荐一个对我来说最容易做到的字体编辑程序吗？

Answer 1

我认为你不能为特殊字符创建带有字符的字体，例如'tab'等。

我不会用javascript替换这些字符，而是使用javascript来改变标签的样式。

These   are tabs

会变成

These<span class="tabs">   </span>are tabs

并且标签css类可以具有例如红色背景。

.tabs{
background-color: red;
}

Answer 2

直观地说，我希望用一些字形替换空格是可行的，通常的警告（可下载的字体不能完全普遍地工作），但制表符和换行符是一个不同的问题。它们不会被渲染，以便从字体中拾取并显示字形。相反，它们会导致格式化操作，例如离开水平空间并移动到下一行的开头。

快速实验支持此分析。使用FontForge，我用一个图形字形替换了字体中的空格字形，并显示它而不是空格。但对标签做同样的事情并没有改变任何东西。该选项卡只会导致间距，这取决于它在一行上的位置，如HTML规范中所定义。