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

发布于 2024-10-12 02:43:29 字数 64 浏览 5 评论 0原文

是否有字体或 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

穿透光 2024-10-19 02:43:29

如果您只需要数字等宽,可以使用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.

蓦然回首 2024-10-19 02:43:29

CSS:

font-family: monospace;

HTML:

<tt>

CSS:

font-family: monospace;

HTML:

<tt>
对你而言 2024-10-19 02:43:29

您可以从任何免费提供的固定宽度字体中进行选择,并将它们嵌入到您的网站中。

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

font-family: "Courier New", Courier, monospace;

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:

font-family: "Courier New", Courier, monospace;
—━☆沉默づ 2024-10-19 02:43:29

在某些情况下,使用 pre 标签(

text

) 可能会满足您对等宽(固定宽度)文本的需求。它对我来说适用于 HTML5 + Chrome(当前版本)。 tt 元素已弃用。

但是,

 标记似乎只能包含被视为“短语内容”的标记。请参阅 该标签的 w3 文档。您可以单击链接查看哪些元素被视为“短语内容”。当然,如果您不关心有效的 HTML 或跨浏览器兼容性,则每个浏览器可能都支持较宽松的规范版本。

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). The ttelement 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.

—━☆沉默づ 2024-10-19 02:43:29

有许多等宽字体为每个字符提供相同的宽度。 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.

寂寞陪衬 2024-10-19 02:43:29

另一种选择是使用 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文