如何在 html/css 中设置字符宽度 [重复]答案

【问题标题】：How to set character width in html/css [duplicate]如何在 html/css 中设置字符宽度 [重复]
【发布时间】：2017-11-16 17:36:27
【问题描述】：

我想在 html div 中使用所有字符宽度相同的字体。

例如，在大多数字体中，W 都比 i 宽……有没有一种字体的所有字符都一样宽？

【问题讨论】：

你的意思是monospaced font？有很多，比如 Consolas。
或者您正在寻找<pre>？

标签： html css

【解决方案1】：

您要查找的是monospace font，即具有固定宽度字符的字体。

现在，要使用这样的字体，您可以使用import 并直接使用它的名称，如下所示：

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
div { font-family: 'Roboto Mono', monospace; }

&lt;div&gt;&lt;p&gt;Some text in a div&lt;/p&gt;&lt;/div&gt;

或者您可以简单地依赖monospace value 本身，这意味着用户将看到基于他们正在使用的浏览器和操作系统的字体：

div { font-family: monospace; }

&lt;div&gt;&lt;p&gt;Some text in a div&lt;/p&gt;&lt;/div&gt;

或者，您可以使用 pre element 代替 div，因为它通常以等宽字体显示文本：

&lt;pre&gt;Some text in a pre.&lt;/pre&gt;

要查找一些固定宽度的字体，您可以使用Google Fonts，它们有一个过滤器专门用于此目的。此外，Stack Exchange 网络上还有其他相关的问题/答案可能对您有用，例如：

【讨论】：

【解决方案2】：

您可以将字符与单独的类分开，然后您可以使用transform: scale(x, y); 来更改字符的宽度和高度。

.text {
    text-align: center;
    letter-spacing:2px;
    text-transform: full-width;
    -webkit-transform:scale(15.0,1.0);
    -moz-transform:scale(15.0, 1.0);
    -ms-transform:scale(15.0, 1.0);
    -o-transform:scale(15.0, 1.0);
    transform:scale(15.0,1.0);
}

&lt;div class="text"&gt;tc&lt;/div&gt;

【讨论】：

【解决方案3】：

您正在寻找等宽字体...

这里有一些例子：https://fonts.google.com/?category=Monospace

【讨论】：