Question

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

例如，如果我有一个句子，“快速的灰狐狸跳过懒惰的狗”显示在“Courier New”中，一个固定宽度的字体，它总体上会比它在宽度变化的字体中更宽，“Arial”。我想使用“Arial”而不是“Courier New”但是字符固定宽度。

可变宽度的示例：
快速的灰狐狸跳过懒狗。

固定宽度的示例：

The quick grey fox jumped over the lazy dog

请注意每个示例中“快速”和“灰色”一词中人物彼此之间的距离。

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

结果应该很糟糕，因为没有比例字体。

尽管如此，您可以使用个别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的信件将拼写/读出 Ø
ñ
e

b
y

0
ñ
e

瓦特
^ h
我
升
e

a

<磷>氮
Ø
[R
米
一个
我

点
一个
[R
一个
摹
[R
一个
p
h

瓦特
Ø
ü
升
d

b
e

ř
Ë
一个
d

一个
s

a

取值
Ë
ñ
Ť
Ë
ñ
ç
Ë
，

一个
s

û
小号
ü
一个
升
。

点
[R
Ë
Ť
Ť
y

一个
ñ
ñ
Ø
ÿ
我
ñ
g

电子
^ h
？

双关语

Answer 4

这是一个老问题，但我建议寻找合适的固定宽度字体，可以用作具有所需功能的webfont。例如，我是Inconsolata的忠实粉丝。

我从Google Fonts开始，取消选择只留下Monospace的所有类别。

Answer 5

您可以使用字母间距CSS属性来获取所需内容。根据定义，monospace字体具有与serif或sans-serif不同的字符宽度。使用字母间距是您最好的选择W3C Reference

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

5 个答案: