Wie verhindern Sie, dass Chrome (oder Telefon-Internetbrowser im Allgemeinen) auf einem Android-Gerät nicht-standardmäßige Unicode-Symbole für Emojis ersetzen?

Question

Hallo Stackoverflow-um zu machen, worum ich mich erkundige, werde ich genauer hinarbeiten.

Ich verwende die folgenden Symbole in einer Rotation Transformation: ☎ und ♦ und ✔ (☎ and ♦ and ✔ respectively).

Auf meinem Android-Gerät (Smartphone, LG G4), ersetzt es diese Textsymbole mit Nicht-Text-Bild Emojis, die nicht mit meiner Transformation oder Schriftgröße Stile formatieren.

Ich möchte den Browser zwingen, die regulären Symbole in der Schriftart zu verwenden, die ich auf meiner Website bereitgestellt habe (unter Verwendung von @ font-face mit einer enthaltenen .ttf-Datei). Auf Desktops habe ich keinerlei Probleme, meine ausgewählten Symbole wie beabsichtigt anzuzeigen.

Ihre Hilfe wird sehr geschätzt, da ich lieber nicht gezwungen wäre, ein Bild als Ersatz für meine Textanordnung zu verwenden. Vielen Dank.

Answer 1

Sie sollten einen Webfont mit Unterstützung für die Zeichen einschließen, die Sie verwenden möchten.

Um ein Symbol Schriftart in Ihrem CSS, verwenden Sie den folgenden Code enthalten:

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

Anschließend können Sie Ihr Symbol wie folgt sind:

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

Wenn Sie nicht wissen, ein WebFont dass unterstützt deinen Charakter, du kannst ihn einfach mit der Icomoon App erstellen. Siehe auch meine Open Source Emoji icon font für ein Beispiel für eine Icon Schriftart mit Unterstützung für 650 Symbole, die ich mit der Icomoon App erstellt habe.

Wenn Sie vorhaben, meine Icon-Schrift (oder eine andere Symbolschrift) zu verwenden, würde ich empfehlen, die Schriftart in der ICOMOON-App so zu bearbeiten, dass alle Symbole mit Ausnahme der von Ihnen benötigten entfernt werden.

---

Weitere Informationen:

• Create webfont with Unicode Supplementary Multilingual Plane symbols