使Web頁面上的每個Unicode字符的寬度相同

我需要以下兩個Unicode字符有一個網頁的相同寬度：▼（&＃9660;）和▶（&＃9654;）使Web頁面上的每個Unicode字符的寬度相同

font-family: monospace;沒有幫助，他們仍然可以得到不同的寬度（Windows 8中，火狐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>

來源

2012-12-13 Andrej

將兩個字符在另一個標籤（像<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; 
}

來源

2012-12-13 16:32:30 Jonathan

非常感謝！另外一個小問題：寬度：1em是否可擴展（對於密度不同的顯示器）？ – Andrej

你是在想我正在建造一種樹，節點被打開和關閉。「之前」選擇器的技巧也有幫助:-)另外我發現字符►（►）比▶（▶）更適合。 – Andrej

@Andrej我不確定你的顯示密度是什麼意思，但是，如果你在'em'中指定了一個寬度，當你設置一個更大的'font-size'時它會變得更寬。這裏[示例]（http://jsfiddle.net/jhogervorst/yeahk/）寬度爲'2em'的寬度。 – Jonathan

使Web頁面上的每個Unicode字符的寬度相同

回答

相關問題