javascript - 我的字体系列无法呈现 "straight quotes"。我应该怎么办？

Question

我正在使用名为“Palanquin”的 Google 字体系列。不幸的是，Palanquin 无法呈现直引号(单引号和双引号)。相反，它将所有直引号呈现为结束弯引号。

这意味着如果用户在文本区域中键入“this”，它将呈现为“this”。看到不同？为了看得更清楚，请在此处输入直引号:

https://fonts.google.com/?query=palanquin

据我所知，这只是计算机网络浏览器中的一个问题。在 iPhone 上，这不是问题，因为 iOS 会在用户键入时智能地将直引号转换为适当的弯引号(类似于 MS Word)。我还没有在 Android 上测试过。

我愿意接受有关如何解决此问题的所有建议。我的一个想法是使用 JavaScript 将所有直引号包装在一个使用不同字体系列的类中。像这样:

var userValue = textarea.value
var changedValue = userValue.replace(/"/g, "<span class=\"differentFontFamily\">\"</span>")

但这并没有正确插入我的 HTML。它只是输出一个包含可见 HTML 的字符串。

求助!谢谢!

Answer 1

你放在那里的 HTML 出现的原因是文本区域只支持纯文本。

我建议你使用一个 contenteditable div，你可以在其中插入 HTML 标签而不显示它们。

HTML

<div contenteditable="true" id="myDiv">Type text here...</div>

用 Javascript 替换引号:

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = myDiv.innerHTML.replace(/"/g, "<span class=\"differentFontFamily\">\"</span>");