Question

我需要两个以下Unicode字符才能在网页中使用相同的宽度：▼（＆amp;＃9660;）和▶（＆amp;＃9654;）

font-family: monospace;没有帮助，它们的宽度仍然不同（Windows 8，Firefox 17）：

Screenshot showing monospace problem

有没有办法让页面上的每个（而不仅仅是常用字母）字符具有相同的宽度？

示例的源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>7
  <body>
    <h1 style="font-family: monospace;">
      &#9660;test 
      <br>
      &#9654;test
    </h1>
  </body>
</html>

Answer 1

将两个字符放在另一个标记（如<span>）中，并使用CSS为其赋予固定宽度。像这样（working example）：

<span style="display: inline-block; width: 30px;">&#9660;</span>test 
<br>
<span style="display: inline-block; width: 30px;">&#9654;</span>test

或者选择一种我认为更合适的CSS方法（working example）：

<span class="opened">test</span>
<br>
<span class="closed">test</span>

CSS代码：

.opened::before {
    display: inline-block;
    content: "▼";
    width: 30px;
}

.closed::before {
    display: inline-block;
    content: "▶";
    width: 30px;
}

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

1 个答案: