css - 更改 PRE 样式但保留空格距离

Question

我正在使用 PRE 标签显示一些内容，因为按原样保留空白非常重要。但是，当我尝试更改 PRE 字体系列时，空白缩进会分崩离析。

更具体地说，我正在构建一个包含歌曲和弦及其等效歌词的网站，因此我需要每个和弦正好位于特定单词或字母之上。当我设置 PRE 字体系列的样式时，和弦会失去它们相对于字母位置的位置，即使所有文本的样式都相同。

有什么建议吗？

Answer 1

正如其他海报所说，您需要等宽字体。如果您想使用自己的等宽字体，可以使用 CSS3 自定义字体。不过，解决问题的最简单方法是让查看者的浏览器决定使用哪种字体。为确保所有查看者都能以等宽字体看到您的 pre 内容，请使用以下内容。

pre { font-family: monospace; }