Jak uniemożliwić Chrome (lub ogólnie przeglądarkom internetowym) na urządzeniu z systemem Android zastępowanie niestandardowych symboli Unicode dla Emoji?

Question

Witaj Stackoverflow - aby to, o co pytam, wyjaśnić, wyjaśnię.

Używam następujących symboli w transformacji rotacji: ☎ i ♦ oraz ✔ (☎ and ♦ and ✔ respectively).

Na moim urządzeniu z Androidem (inteligentny telefon, LG G4), zastępuje on te symbole tekstowe emotikonami innymi niż tekstowe, które nie są formatowane z moimi stylami transformacji lub rozmiaru czcionki.

Chcę zmusić przeglądarkę do używania zwykłych symboli w czcionce, którą dostarczyłem na mojej stronie internetowej (używając @ font-face z dołączonym plikiem .ttf). Na komputerach nie mam żadnych problemów z wyświetlaniem wybranych symboli zgodnie z przeznaczeniem.

Twoja pomoc jest bardzo doceniana, ponieważ wolałabym nie być zmuszana do zastępowania mojego układu tekstowego obrazem. Dziękuję Ci.

Answer 1

Powinieneś dołączyć webfont z obsługą znaków, których chcesz użyć.

Aby dołączyć czcionki ikon w CSS, należy użyć następującego kodu:

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

można następnie dołączyć swój symbol takiego:

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

Jeśli nie wiedzieć, że webfont wspiera twoją postać, możesz ją łatwo stworzyć przy pomocy Icomoon App. Zobacz także mój open source Emoji icon font, aby zobaczyć przykład czcionki Icon z obsługą 650 symboli, którą stworzyłem za pomocą aplikacji Icomoon.

Jeśli planujesz używać mojej czcionki Icon (lub jakiejkolwiek innej czcionki ikon), poleciłbym edytować czcionkę w aplikacji Icomoon, aby usunąć wszystkie symbole oprócz tych, których potrzebujesz, ponieważ znacznie zmniejszyłoby to twoje pliki!

---

Więcej informacji:

• Create webfont with Unicode Supplementary Multilingual Plane symbols