填充「O」字，或通過CSS

模仿我需要寫這段文字的HTML：填充「O」字，或通過CSS

我試圖用一些Unicode字符像● Unicode Character 'BLACK CIRCLE' (U+25CF)或⬤ Unicode Character 'BLACK LARGE CIRCLE' (U+2B24)但他們需要一些造型（即大小與o不同），並且在某些系統和字體上顯示問題。

你能提出一個更好的解決方案嗎？它可以是一個廣泛接受的Unicode字符或一些CSS模仿（在這種情況下，如果HTML仍包含Now.字符串以實現良好索引，那將會很好）。圖像不是一個選項。

來源

2015-10-12 bpiec

我會建議使用CSS border-radius來創建實心的「o」圈。

span { 
 
    font-family: sans-serif; 
 
    font-size: 50px; 
 
} 
 
i { 
 
    display: inline-block; 
 
    text-indent: -9999px; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: black; 
 
    vertical-align: middle; 
 
    border-radius: 50%; 
 
}

<span>N<i>o</i>w.</span>

來源

2015-10-12 18:44:01 Stickers

很不錯，但我可以依靠的寬度和字體大小的大小？我使用響應式設計和字體大小更改。 – bpiec

最好的答案是測試它，雖然字體大小並不能真正控制寬度，但只要使用網絡安全字體，它不應該輸出太多差異。如果你使用unicode特殊字符，你可能會在智能手機上遇到emoji問題等等。如果你在問題中標記它，有人可能會回答，還有另一種使用svg的選項。 – Stickers

其實我設法讓字體大小不可知，所以謝謝！ – bpiec

如果你真的想填補Ø字符，而不是一個醜陋的圈子，存檔，這是編輯您的字體和創造充滿「O」字的唯一（和相當簡單）的方式。聽起來很可怕，但這是一件容易完成的任務。您可以製作新字體或將自定義字符添加到現有字體中。例如，對於字體編輯器，您可以使用FontForge。

這裏是我如何與滲濾器，專家字體使其成爲一個例子：

https://github.com/jehy/Storyteller-Dots

附：如果您只需要一個圓圈，使用自定義字體也會更好，因爲您可以對字體大小進行開箱即用的控制。

另一種解決方案 - 使用Unicode字符，被很多字體提供：

◉ ○ ● □ ■您可以用下面的代碼輸出是：

&#9673; &#9675; &#9679; &#9633; &#9632;

來源

2015-10-22 07:10:12 Jehy

填充「O」字，或通過CSS

回答

相關問題