Question

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

例如，在大多数字体中，W比i宽...是否有任何字体都具有相同的宽度？

Answer 1

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

以下是一些示例：https://fonts.google.com/?category=Monospace

Answer 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);
}

<div class="text">tc</div>

Answer 3

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

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

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

<div><p>Some text in a div</p></div>

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

div { font-family: monospace; }

<div><p>Some text in a div</p></div>

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

<pre>Some text in a pre.</pre>

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

如何在html / css中设置字符宽度

3 个答案: