Biểu tượng cảm xúc được hiển thị trong Chrome có độ rộng khác với các trình duyệt khác

Question

Tôi có một trang có biểu tượng cảm xúc theo sau là khoảng trắng và một số văn bản. Ví dụ: "Bạn bè" (ký tự là "bẻ khóa trong hình bóng", U + 1F465). Trong Safari và Firefox trên macOS, nó ám chỉ một khoảng trống giữa biểu tượng cảm xúc và văn bản sau như mong đợi.

Trong Chrome, tuy nhiên, không gian dường như thể đó là vắng mặt:

Nếu tôi loại bỏ các không gian, Chrome ám chỉ rằng chồng chéo văn bản với các biểu tượng cảm xúc. Dường như chiều rộng của biểu tượng cảm xúc được hiển thị trong Chrome nhỏ hơn chiều rộng ký tự thực tế.

Có cách nào để tôi có thể nhận được giao diện trình duyệt mong muốn (không gian rộng thông thường) mà không cần sử dụng phông chữ hình ảnh hoặc biểu tượng không? Tôi đã thử gây rối với một số thuộc tính CSS như text-rendering mà không thành công.

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

JSFiddle

Answer 1

gì tôi sẽ làm là thêm một khoảng thời gian trong span .friends có chứa các biểu tượng cảm xúc, có nó sử dụng một lề phải, và không có một không gian sau nó:

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

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

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

Bằng cách đó bạn không thích e lo lắng về hiển thị không gian;)

Hy vọng điều này sẽ hữu ích! :)

Answer 2

Tôi gặp vấn đề tương tự và phát hiện ra rằng sự cố xảy ra trên màn hình không có võng mạc chỉ.

Để khắc phục điều đó, chúng tôi đã áp dụng một margin thông qua một phương tiện truyền thông truy vấn như thế này:

<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> 

Đây là một phương tiện truyền thông truy vấn khá tối thiểu. Bạn có lẽ nên sử dụng một cái hoàn chỉnh hơn như https://stackoverflow.com/a/31578187/1907212.