有没有办法让可变宽度字体像 HTML 中的固定宽度字体一样工作？ [复制]

Question

有没有办法让可变宽度字体像 HTML 中的固定宽度字体一样工作？

例如，如果我在固定宽度字体“Courier New”中显示句子“The quick gray fox jumped over the lazy dog”，那么它总体上会比在可变宽度字体中更宽，例如, “宋体”。我想使用“Arial”而不是“Courier New”，但字符的宽度是固定的。

可变宽度示例：
敏捷的灰狐狸跳过了懒惰的狗。

固定宽度示例：

敏捷的灰狐跳过了懒狗

请注意在每个示例中，单词“quick”和“grey”中的字符是多么接近。

Answer 1

不仅仅是 CSS。我建议你使用流行的Lettering.js（你需要jQuery）在每个字符周围生成span标签，然后设置所有字符的宽度。

.monospace > span {
  display: inline-block; /* Enable widths */
  width: 1em;            /* Set width across all characters */
  text-align: center;    /* Even out spacing */
}

Test Case

Answer 2

我唯一能想到的就是将每个字母放在一个 HTML 元素中，并为该元素设置如下样式：

width: 8px;         /* Whatever fixed width you want here */
display: block;     /* Force the width to be respected. See also: inline-block */
float: left;        /* So it won't be 1-per-line. Not needed for inline-block */
text-align: center; /* So the character appears in the middle of the block */

我不熟悉 Flex，但如果我要实现这种方法，我会整理一些 Javascript 来为我生成所有元素。

Answer 3

这是一个老问题，但我建议寻找一种合适的固定宽度字体，它可以用作具有您想要的功能的网络字体。例如，我是 Inconsolata 的忠实粉丝。

我会从Google Fonts 开始并取消选择所有类别，只留下等宽。

Answer 4

您也许可以使用 letter-spacing CSS 属性来获得您想要的。根据定义，等宽字体与 serif 或 sans-serif 具有相同的字符宽度。使用字母间距是你最好的选择W3C Reference

Answer 5

结果应该很糟糕，因为比例字体不是为此而设计的。

尽管如此，您可以使用单独的 span 围绕字符来实现：http://jsfiddle.net/rvYES/

body {
  font: normal 100%/1.5 Arial;
}

span {
  outline: 1px dotted darkred;
}
span:nth-of-type(even) {
  outline-color: blue;
}

.w-fixed span {
  display: inline-block;
  min-width: 1em;
}

我添加了视觉线索（大纲）以查看发生了什么，并使用min-width 以防万一，而不是width。
对于使用这些辅助技术的盲人和视力不佳的人来说，这种方法将导致屏幕阅读器的可访问性存在巨大问题。输入个人span的字母将被拼写/读出
o
n
e

b
是的

o
n
e

w
h
我
l
e

一个

n
o
r
米
一个
l

p
一个
r
一个
g
r
一个
p

w
o
u
l

b
e

r
电子
一个

一个

一个

s
电子
n
t
电子
n
c
电子
,

一个

你
s
u
一个
l
.

P
r
电子
t
t
是的

一个
n
n
o
是的
我
n
克

e
h
?

双关语