我的字体系列无法呈现“直引号”。我该怎么办？答案

【问题标题】：My font family cannot render "straight quotes". What should I do?我的字体系列无法呈现“直引号”。我该怎么办？
【发布时间】：2020-05-16 14:40:35
【问题描述】：

我正在使用 Google Font Family 调用“Palanquin”。不幸的是，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 的字符串。

请帮忙！谢谢！

【问题讨论】：

标签： javascript html textarea quotes google-fonts

【解决方案1】：

显示您放置的 HTML 的原因是 textareas 仅支持纯文本。

我建议你使用 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>");

【讨论】：

【解决方案2】：

如果您希望直引号更改字体，您获得样式的直引号的字体系列看起来就是这样。

【讨论】：

【解决方案3】：

这里是一个带有字符串替换方法的示例代码 sn-ps。如果您需要普遍使用它，您可以将其作为一项功能进行改进。 :)

var ele = document.getElementById('quoteReplace');
var nEle = ele.innerHTML.replace(/"/g, "<span class='newFontStyle'>\"</span>");
ele.innerHTML = nEle;

@import url('https://fonts.googleapis.com/css?family=Palanquin&display=swap');
body{
  font-family: 'Palanquin', sans-serif;
  font-size: 28px;
}
.newFontStyle{
  font-family: Arial, Helvetica, sans-serif;
}

&lt;div id="quoteReplace"&gt;This is an "Example quote" with paragraph.&lt;/div&gt;

【讨论】：

【解决方案4】：

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

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

【讨论】：