使“*”和空格大小相同[重复]答案

【问题标题】：Making "*" and space the same size [duplicate]使“*”和空格大小相同[重复]
【发布时间】：2017-07-26 20:16:02
【问题描述】：

我正在为刚开始开发的人准备一个小项目。它包括一些 HTML 内容，他们应该在其中使用 Javascript 制作一些形状，如矩形或三角形。表格应该由“*”“绘制”。由于我要介绍 &nbsp; 元素和一些简单的 for 和 if 构造，我希望他们创建一个如下所示的矩形：

* * * * 
 * * * 
* * * *
 * * * 
* * * *

尺寸不同。

我可以想象这样的代码：

for (j = 0; j < 10; j++) {
  for (i = 1; i <= 20; i++) {
    if (j % 2 == 1) {
      if (i % 2 == 1) {
        document.write("*");
      } else {
        document.write("&nbsp;");
      }
    } else {
      if (i % 2 != 1) {
        document.write("*");
      } else {
        document.write("&nbsp;");
      }
    }
  }
  document.write("<br/>");
}

由于我刚刚尝试过，我想知道，在 HTML 中，“*”和空格的大小不同。现在我正在寻找使其大小相同的命令（因为我知道有一个），但我找不到它。

【问题讨论】：

使用pre标签可能是最快最简单的

标签： javascript html css fonts

【解决方案1】：

这根本不是 javascript 问题。

你必须使用monospace 字体。基本上这组字体对于每个字符都有相同的像素宽度。

在此处了解更多信息：https://en.wikipedia.org/wiki/Monospaced_font

【讨论】：

【解决方案2】：

试试这个，

for (j = 0; j < 10; j++) {
        for (i = 1; i <= 20; i++) {
            if (j % 2 == 1) {
                if (i % 2 == 1) {
                    document.write("*");
                } else {
                    document.write("<span class='space'></span>");
                }
            } else {
                if (i % 2 != 1) {
                    document.write("*");
                } else {
                    document.write("<span class='space'></span>");
                }
            }
        }
        document.write("<br/>");}

.space {
margin-left: 10px; // change this as you require
}

【讨论】：