web-dev-qa-db-ja.com

クロスプラットフォームサイトでユニコードを効果的に使用する方法は?

自分のサイトで「ELECTRIC LIGHT BULB(U + 1F4A1)」ユニコードを使用しようとしていました。 bodyタグのfont-familyでSymbolaフォントを指定している場合でも、プラットフォームごとに異なるUnicodeが表示されます(Unicodeを除くすべての文字がこのフォントを使用します)。

Linux:Symbolaフォント
Windows:Segio UIフォント
Android:絵文字

すべてのプラットフォームに適切なアイコンが表示されるため、これは問題のようには見えません。色を変更しようとすると問題になります。色を変更しようとすると、それは絵文字では機能しません。

また、一般的にすべてのプラットフォームで異なる文字が表示されるのは面倒です。

プラットフォーム間の違いを避けて、ユニコードを効果的に使用するにはどうすればよいですか?

4
oddRaven

ユニコードアイコンをブラウザ間で一貫して表示させる唯一の方法は、アイコンのデフォルトWebフォントをロードすることです。たとえば、電球のユニコード文字は Symbolaフォント を使用します。それがデバイスにインストールされていない場合、デバイスはリストしたフォントのフォールバックを使用します。

クロスプラットフォームソリューションでは、 Font Awesome のようなフォントアイコンを使用する必要があります。 Icomoon を使用して独自のフォントアイコンを作成することも非常に簡単です。それとも、実用的ではない各アイコンwebfontを読み込む必要があります。

1
John R Perry