22

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

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

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

固定宽度示例： 

敏捷的灰狐跳过了懒惰的狗

请注意每个示例中“快速”和“灰色”一词中的字符彼此之间的接近程度。

4

5 回答 5

13

不仅仅是 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 */
}

测试用例

于 2013-01-05T23:20:09.523 回答
3

我唯一能想到的是将每个字母放在一个 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 来为我生成所有元素。

于 2013-01-05T23:13:11.177 回答
1

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

I'd start with Google Fonts and unselect all categories leaving only Monospace.

于 2016-04-27T00:16:32.910 回答
0

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

于 2013-01-05T23:07:58.037 回答
0

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

尽管如此，您可以通过单独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将立即拼写 / 读
出

由
_

在线
_
_

当
我
_
_
_

一种


正常_
_
_
_
_

p
a
r
a
g
r
a
p
h

我
想
_
_
_

是
_

阅读
_
_
_

一个
_

一种

s
e
n
t
e
n
c
e
,

一个
_

我们
是你 。
_
_

提交
_
_
_
_
_

一个
n
n
o
y
i
n
g

嗯 ？
_

双关语

于 2013-01-05T23:36:34.307 回答