使网页上的每个字符具有相同的宽度

Jay*_*Jay 24 html css fonts

是否有字体或CSS属性可以为每个字符提供相同的宽度而无需自己绘制(.ttf)?

Ned*_*der 37

CSS:

font-family: monospace;
Run Code Online (Sandbox Code Playgroud)

HTML:

<tt>
Run Code Online (Sandbox Code Playgroud)

  • 仅供参考****tt**标签在HTML5中已弃用 (10认同)

Bri*_*son 21

Courier New怎么样?等宽?

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

  • 它不适用于以下两个字符:▼,▶.至少Chrome,IE和Firefox会给它们不同的宽度. (5认同)

Jus*_*ner 16

您可以选择任何免费提供的固定宽度字体并将其嵌入您的网站.

如果您不想在页面中嵌入字体,可以使用以下内容来获取任何等宽字体(固定宽度的另一个术语)字体:

font-family: "Courier New", Courier, monospace;
Run Code Online (Sandbox Code Playgroud)

  • 是的-这就是等距的意思。这也是为什么等宽字体通常没有吸引力的原因。 (2认同)

tri*_*imb 11

如果只需要数字使宽度相等,则可以使用font-variant-numeric: tabular-nums;。这对于为计数器设置动画非常有用。在Mozilla Web文档上阅读有关它的更多信息。

  • 我来这里的目的是记住鲜为人知的CSS属性,但很遗憾,这显然不是最好的答案,这不是公认的答案;) (3认同)

Bry*_*yan 5

对于某些情况,使用pre标签(<pre>text</pre>)可能会满足您对等宽(固定宽度)文本的需求.它适用于HTML5 + Chrome(当前版本).该tt元素已弃用.

但是看起来<pre>标签只能包含被认为是" 措辞内容 "的标签.请参阅该标记w3文档中的 " 内容模型 "部分.您可以单击该链接以查看哪些元素被视为"短语内容".当然,如果您不关心有效的HTML或跨浏览器兼容性,每个浏览器都可能支持更宽松的规范版本.