我的字体家族无法呈现“直引号”。我该怎么办？

Question

我使用的是Google字体家族的“ Palanquin”。不幸的是，Palanquin无法呈现单引号（单引号和双引号）。相反，它会将所有直引号都显示为闭合的卷曲引号。

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

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

据我所知，这仅是计算机Web浏览器中的问题。在iPhone上，这不是问题，因为iOS会根据用户类型（类似于MS Word）将直引号智能地转换为适当的卷曲引号。我尚未在Android上进行测试。

我欢迎所有有关解决此问题的建议。我想到的一个想法是使用JavaScript在使用不同字体系列的类中将所有直引号引起来。像这样的东西：

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

但是这不能正确插入我的HTML。它只是输出带有可见HTML的字符串。

请帮助！谢谢！

Answer 1

您放置在此处的HTML出现的原因是textareas仅支持纯文本。

我建议您使用一个内容可编辑的div，您可以在其中插入HTML标记而不会显示它们。

HTML

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

和用Java代替引号：

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

Answer 2

如果您想使用直引号来更改字体，那么您获得的字体家族会使用直引号样式，使外观看起来像这样。

Answer 3

我想出了一个对我来说足够好的解决方案。当用户输入在其前面带有空格的直引号时，我假设他们希望将其作为一个开放的弯引号，因此我使用以下代码将其更改为：

var userValue = e.target.value
var changedValue = userValue .replace(/\ "/g, " “")

Answer 4

这里是带有字符串替换方法的示例代码片段。如果需要一般使用，可以将其作为一项功能进行改进。 ：）