Come si impedisce a Chrome (o ai telefoni Internet di telefonia in generale) su un dispositivo Android di sostituire i simboli Unicode non standard per Emojis?

Question

Ciao StackOverflow: per rendere più chiaro ciò che sto chiedendo, elaborerò.

Sto utilizzando i seguenti simboli in una trasformazione di rotazione: ☎ e ♦ e ✔ (☎ and ♦ and ✔ respectively).

Sul mio dispositivo Android (smartphone, LG G4), sostituisce questi simboli di testo con emoji di immagini non di testo che non si formattano con i miei stili di trasformazione o dimensione del carattere.

Desidero forzare il browser a utilizzare i simboli regolari nel carattere che ho fornito sul mio sito Web (utilizzando @ font-face con un file .ttf incluso). Sui desktop, non ho alcun problema a visualizzare i miei simboli selezionati come previsto.

Il vostro aiuto è molto apprezzato in quanto preferirei non essere costretto a sostituire un'immagine del mio arrangiamento di testo. Grazie.

Answer 1

È necessario includere un webfont con supporto per i caratteri che si desidera utilizzare.

Per includere un carattere un'icona nel CSS, utilizzare il seguente codice:

@font-face { 
    font-family: 'myfont'; 
    src:url('fonts/myfont.eot?-td2xif'); 
    src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'), 
     url('fonts/myfont.woff?-td2xif') format('woff'), 
     url('fonts/myfont.ttf?-td2xif') format('truetype'), 
     url('fonts/myfont.svg?-td2xif#myfont') format('svg'); 
    // Different URLs are required for optimal browser support 
    // Make sure to : 
    // 1) replace the URLs with your font's URLs 
    // 2) replace `#myfont` with the name of your font 
    font-weight: normal; // To avoid the font inherits boldness 
    font-style: normal; // To avoid font inherits obliqueness or italic 
} 

.emoji { 
    font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback 
    speak: none; // To avoid screen readers trying to read the content 
    font-style: normal; // To avoid font inherits obliqueness or italic 
    font-weight: normal; // To avoid the font inherits boldness 
    font-variant: normal; // To avoid the font inherits small-caps 
    text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase 
    line-height: 1; // To avoid the font inherits an undesired line-height 
    -webkit-font-smoothing: antialiased; // For improved readability on Webkit 
    -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla 
} 

È quindi possibile includere il simbolo come questo:

<span class="icon">&#9742;</span> 
<span class="icon">&#9993;</span> 

Se non sanno un webfont che supporta il tuo personaggio, puoi facilmente crearne uno tu stesso usando lo Icomoon App. Vedi anche il mio open source Emoji icon font per un esempio di un font Icon con supporto per 650 simboli, che ho creato con l'app Icomoon.

Se si prevede di utilizzare il mio carattere Icona (o qualsiasi altro carattere di icona), si consiglia di modificare il carattere nell'app Icomoon per rimuovere tutti i simboli tranne quelli necessari, in quanto ciò ridurrebbe notevolmente la dimensione del file!

---

Maggiori informazioni:

• Create webfont with Unicode Supplementary Multilingual Plane symbols