使网页上的每个字符具有相同的宽度
是否有字体或 CSS 属性可以为每个字符提供相同的宽度,而无需自己绘制它们(.ttf
)?
Is there a font or CSS property that would give every character the same width without the need of drawing them yourself(.ttf
)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
如果您只需要数字等宽,可以使用font-variant-numeric: tabular-nums;。它对于动画计数器非常有用。在 Mozilla 网页上了解更多相关信息文档。
If you only need numbers to be equal widths, you can use
font-variant-numeric: tabular-nums;
. It's really useful for animating counters. Read more about it on Mozilla web docs.CSS:
HTML:
CSS:
HTML:
新快递怎么样?等宽空间?
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
How about Courier New? monospace?
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
您可以从任何免费提供的固定宽度字体中进行选择,并将它们嵌入到您的网站中。
如果您不想在页面中嵌入字体,您可以使用以下命令来获取可用的等宽字体(固定宽度的另一个术语)字体:
You could chose from any of the freely available fixed width fonts and embed them in your site.
If you don't want to embed a font in your page, you could use the following to take whatever monospace (another term for fixed width) font is available:
在某些情况下,使用 pre 标签(
) 可能会满足您对等宽(固定宽度)文本的需求。它对我来说适用于 HTML5 + Chrome(当前版本)。
tt
元素已弃用。但是,
For certain cases, using the pre tag,(
<pre>text</pre>
), might fill your needs for monospaced (fixed width) text. It worked for me with HTML5 + Chrome (current version). Thett
element is deprecated.However it appears the
<pre>
tag can only contain tags which are considered "phrasing content". See "Content model" section on the w3 documentation for that tag. You can click the link to see what elements are considered "phrasing content". Of course, each browser may support a looser version of the spec if you don't care about valid HTML or cross browser compatibility.有许多等宽字体为每个字符提供相同的宽度。 Courier 和 Courier New 可能是最常见的,应该可以在几乎每个系统。
There's a number of monospaced fonts that give equal width to each character. Courier and Courier New are probably the most common, and should be available on pretty much every system.
另一种选择是使用 lettering.js,它将在每个元素周围创建一个 span 元素然后您可以使用 css 设置宽度的字母。不过,这可能只适用于小文本。
Another option would be to use lettering.js, which would create a span element around each letter that you could then set a width to with css. This would probably only be advisable for small texts, though.