Chromeで表示される絵文字の幅が他のブラウザとは異なります

Question

絵文字付きのページと、スペースとテキストがあります。たとえば、「Friends」（キャラクターは「バスト・シルエット」、U + 1F465）です。 macOSのSafariとFirefoxでは、絵文字と次のテキストの間にスペースがあるようにレンダリングされます。それが不在だかのようにChromeの場合

は、しかし、スペースが表示されます。

私はスペースを削除した場合、Chromeは絵文字とテキストの重複をレンダリングします。 Chromeでレンダリングされた絵文字の幅が実際の文字幅より小さいようです。

画像やアイコンフォントに頼らずに、希望の外観（通常の幅のスペース）のクロスブラウザを得る方法はありますか？私は成功なしでtext-renderingのようないくつかのCSSプロパティを使いこなそうとしました。私はどうなるのか

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

JSFiddle

Answer 1

、以内に絵文字が含まれている.friendsスパンを別のスパンを追加し、それはそれの後にスペースを持って右マージンを使用して、いないです。

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

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

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

あなたが肝炎はありませんその方法スペースレンダリングを心配します;）

:)

Answer 2

私は同じ問題を抱えており、非網膜スクリーンでしか発生していないことがわかりました。

<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のようなより完全なものを使用するべきです。