在Chrome中呈現的表情符號與其他瀏覽器中的寬度不同

我有一個帶有表情符號的頁面，後面跟着一個空格和一些文本。例如，「朋友」（字符是「輪廓半身像」，U + 1F465）。在macOS上的Safari和Firefox中，它會按照預期呈現emoji和以下文本之間的空格。在Chrome中呈現的表情符號與其他瀏覽器中的寬度不同

在Chrome中，但是，出現的空間，彷彿這是不存在的：

如果我刪除了空間，使鉻與表情符號的文本重疊。看起來像Chrome中呈現的emojis的寬度小於實際字符寬度。

有沒有什麼辦法可以得到所需的外觀（正常寬度的空間）跨瀏覽器而不訴諸圖像或圖標字體？我試圖搞亂一些CSS屬性，如text-rendering沒有成功。

<style> 
    .friends { 
    font-family: Helvetica, Arial, sans-serif; 
    } 
</style> 
<span class="friends"> Friends</span>

JSFiddle

來源

2017-02-03 Harrison Liddiard

我會做的是增加一個跨度內的.friends跨度包含的表情符號，都使用它的權利保證金，並沒有加上一個空格：

.friends { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
} 
 

 
.friends span { 
 
    margin-right: 10px; 
 
}

<span class="friends"><span></span>Friends</span>

這樣，你不甲肝e擔心空間渲染;）

希望這有助於！ :)

來源

2017-02-03 03:32:17

我有同樣的問題，並發現它發生在非視網膜屏幕只有。

<span class="friends"><span class="emoji"></span> Friends</span> 

<style> 
    @media 
    not screen and (min-device-pixel-ratio: 2), 
    not screen and (min-resolution: 192dpi) { 
    span.emoji { 
     margin-right: 5px; 
    } 
    } 
</style>

這是一個相當小的媒體查詢：

爲了解決這個問題，我們通過媒體，這樣的查詢應用了margin。您應該使用更完整的一個，如https://stackoverflow.com/a/31578187/1907212。

來源

2017-05-23 22:03:18

在Chrome中呈現的表情符號與其他瀏覽器中的寬度不同

回答

相關問題