2017-06-21 51 views
0

我正在一個Wordpress網站上工作,我需要使用音樂符號「flat」。爲了弄清楚什麼是處理這個問題的好方法,我在相應的文章(https://en.wikipedia.org/wiki/Flat_(music))中查看了維基百科上使用的內容。爲什麼一個CSS類似乎在手機上被忽略?

我知道如何找到HTML實體代碼並使用它,並且我知道我可以從其他地方複製該符號並將其直接粘貼到我的文章中。但是當這樣做的時候,符號周圍會出現額外的填充,所以它顯示不正確,如下所示:D♭。 (實際上它不是在這裏做的,所以我不得不在每一邊添加空格來模擬它。)看起來問題是通過以下代碼在維基百科上處理的,該代碼出現在使用扁平符號的任何地方:

<span class="music-symbol" style="font-family: Arial Unicode MS, Lucida Sans Unicode;">♭</span> 

因此,我使用了相同的代碼,並在CSS文件中創建了一個「音樂符號」類,其中我將填充設置爲0.我無法在維基百科上找到相應的類,但我猜測那就是它包含。我真的不知道爲什麼會這樣(我是一個noob),但它似乎工作,假設我使用樣式標籤指定字體,如圖所示。當我說「它有效」時,我的意思是它使平面符號顯示在註釋名稱旁邊,因爲它應該沒有額外的空間,如下所示:D♭。

但是,當我在Android上查看同一網站時,間距仍然存在。任何人都可以解釋爲什麼,我應該如何解決這個問題?

此外,有沒有一種更好或更直接的方式來處理特殊符號,如單位?我不明白爲什麼我能夠直接將它粘貼到SO上,並且無需使用額外的類引用和樣式標籤即可使間距正確。

+0

這些字體名稱應包含在報價造型一span請參見下面的類定義 '宋體的Unicode MS', '龍力三世統一' ;「' – Blazemonger

+0

好的,謝謝。我只是直接從維基百科複製它。 – johnnyb1970

回答

1

據我所知,該特定網站的樣式中沒有music-symbol類別的其他樣式。從我可以告訴額外的空白是繼承到正在使用的元素和字體。填充將不會是你想要改變的,你會想要調整放置符號的span元素的margin。 `風格=「FONT-FAMILY:

用於與music-symbol

span.music-symbol { 
    margin-left: -2px; 
} 
+0

我決定只是用小寫'b'去,因爲讓平面符號以一致的間距出現看起來像是太多的工作。您的建議可以在我的桌面上運行 - 我可以將平面符號貼近紙條 - 但在手機上查看頁面時無法使用。間距要麼不受影響,要麼使符號過於接近,幾乎重疊(我現在不記得哪一個)。 – johnnyb1970