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

Question

我正在使用 Google 字体系列调用 "Palanquin"。不幸的是，Palanquin 无法呈现直引号（单引号和双引号）。相反，它将所有直引号呈现为右弯引号。

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

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

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

上测试过

我乐于接受有关如何解决此问题的所有建议。我的一个想法是使用 JavaScript 将所有直引号包装在一个 class 范围内，该范围使用不同的字体系列。像这样：

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>");

Answer 2

如果您想要直引号更改字体，您将直引号设置为这样的字体系列。

Answer 3

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

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

Answer 4

这是一个使用字符串替换方法的示例代码片段。如果您需要一般使用它，您可以将其作为一个功能进行改进。 :)

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;
}

<div id="quoteReplace">This is an "Example quote" with paragraph.</div>

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

My font family cannot render "straight quotes". What should I do?

javascript

html

textarea

quotes

google-fonts