javascript - 我不希望逗号后的空格是固定宽度 - 最佳实践？

Question

我正在创建一个网站，其中主要标题以固定宽度字体显示（设计师的选择，不是我的）。但是对于包含逗号的标题，这看起来很奇怪——在逗号之后留下了大量的空间。

所以我想知道如何减少这个空间，让事情看起来更自然一些。

一个简单的解决方案是让我的 PHP 后端用逗号后跟空格替换所有出现的逗号后跟空格（此解决方案有效）。但我有点不情愿 - 它似乎是在错误的地方解决问题。例如，如果字体后来更改为不固定宽度的字体，但新开发人员不知道要进入后端以删除插入的薄空间，会发生什么情况？

那么这样做的“正确”方法是什么？

score 6 · Accepted Answer

“正确”的方法是使用看起来不奇怪的字体。完全可以设计一个固定宽度的字体，除了逗号后面的空格更薄。显然，设计师没有使用（或创建）一个。

除了使用不会出现这种情况的字体之外，因为 CSS 中没有办法说“显示这个空间小于字体的其余部分是 X”（至少，没有标记隔离那个空间），你被卡住了调整字符串，这意味着如果您更改字体，您还必须更改其他内容。其他东西是 PHP 还是 JavaScript 都没有关系，这艘船已经在那时起航了。:-)

另请注意，设计者似乎出于某种原因使用了固定宽度的字体。如果您将逗号后的空格更改为不填充完整的固定宽度，则您可能会干扰该原因。

我会留下一个完整的空间。这是设计师的问题，不是你的。

score 1 · Accepted Answer

如果您想以一种主要保留在 CSS 中的方式来处理这个问题，请在评论中提出一个好主意，但没有将其发布为答案：使用 PHP 或 JavaScript 替换逗号后的空格，但用这样的东西代替它：

<span class="space-after-comma"> </span>

然后 CSS 可以驱动如何处理这些空间——不管它们，让它们更窄，等等。那样的话，字体的改变和.space-after-comma空格的处理都是 CSS 层的改变，而不是 PHP 或 JavaScript 层的改变。

（Will：如果您将您的评论作为答案发布，请@我，以便我删除此社区 wiki 答案。）

score 1 · Accepted Answer

没有什么能阻止您单独设计空白：

h1 {
  font-family: monospace;
}
.short-space {
  letter-spacing: -.33em;
}

<h1>PHILOSOPHY,<span class="short-space"> </span>POLITICS AND ECONOMICS</h1>

当您将整个标题复制并粘贴到没有样式信息的不同文本中时，逗号后仍然会有一个常规空格。

3 回答 3