これらのアイコンの仕組み:🌍🌎🌏✅️?


123

これらの文字は色付きのアイコンとして表示されます。

🌍🌎🌏✅️

私にとってはFirefoxでしか動作しません。文字がカラーで表示されない場合、私のシステムでは次のようになっています(おそらくフォントに依存しています)。

画像の説明

firebugとタブのタイトルでも見ることができます:

画像の説明

画像の説明

画像の説明

そして、それらの完全なファイルがあります。また、このdocument.titleアニメーションも一緒に作成しました。これは、HTML外でも機能することを示しています。

それは何ですか?


コメントは詳細なディスカッション用ではありません。この会話はチャットに移動さました
ジャーニーマンオタク

私はOperaを使用していますが、「このように見える」画像で示したようにOperaが表示されないことは間違いありません。だから、私はあなたの質問のうち、それを編集したくなるんだが、それは非常に実質的ではないでしょう...
ステファンBijzitter

37
@StephanBijzitter:あなたや他の人がアイコンをそのように見ないという事実は、画像が重要である理由です。削除しないでください。
user2357112


2
キーワード:OpenTypeの-SVG(stateofwebtype.com/#OpenType-SVGcolor.typekit.com
Prinzhorn

回答:


145

これらの文字は、各文字の表示内容を定義するUnicode標準によって認識される絵文字です。

それらの正確な外観はOSおよびアプリケーションごとに異なりますが、すべて同じことを表しています。

グローブ(🌏)はUnicode文字で1F30FEARTH GLOBE ASIA-AUSTRALIA と呼ばれ ます。2番目(✅)はWHITE HEAVY CHECK MARK呼ばれ、Unicode 2705です。

その方法では、何千もの絵文字があります。すべてのアプリケーションがサポートするものと、あまりサポートされないものがあります。完全なリストはこちらhttp://www.fileformat.info/info/emoji/browsertest.htm


56
フォントは文字の外観を定義するものであり、絵文字は単なる文字であるため、それらの正確な外観は使用するフォントによって異なります。
totymedli

23
実際、2番目は(あなたが言ったように)WHITE HEAVY CHECK MARKVARIATION SELECTOR-16を組み合わせたものです。質問からコピーされた✅️は緑色のボックスに白いチェックマークのように見え、✅回答からコピーされた✅は黒い境界線のある白いチェックマークのように見えます。緑色のボックスに同じ✅️白いチェックマーク。わかりやすくするためにこのコメントのスクリーンショット
-Stijn

4
フォントのサポートが不十分であることに気付いていない可能性があります。私のブラウザでは、緑色の背景が表示されません。
user2357112

8
@ Stijn、Chromeの私にとっては、両方とも緑色のチェックボックスが付いていますi.imgur.com/Cv5RTFM.png
Yisroel Tech

6
これは、絵文字が存在する理由ではなく、Firefoxでのレンダリング方法に関する質問には答えません。
oldmud0

73

Firefoxは、これらの絵文字に特別なフォントを使用しています。TrueTypeフォントの比較的新しい、その他の点ではめったに使用されない機能、レイヤードカラーグリフを採用しています。それ以外(つまり、事前に色付けされたグリフを持つ特別なフォントを持つ)これらのアイコンは、通常のUnicode文字です。

Windowsはバージョン8.1以降のみこれらの色付きフォントをネイティブにサポートしているため、FirefoxはEmojiOneをプライベートにインストールし、独自のフォントレンダラーをWindows 7で使用します。これは、他のほとんどのアプリケーションにカラフルな絵文字アイコンがないことも説明しています


2
Win10でレイヤー化されたカラーグリフのネイティブサポートがある場合、たとえばEdgeでモノクログリフが表示されるのはなぜですか?
バス

5
@ Bas、Edge開発者ツールで確認できるように、このページを表示するためにSegoe UI Emojiは選択されません(他のモノクロフォントは選択します)。:フォントファミリ属性にフォントを挿入するトリックんi.imgur.com/IXiNC86.png
aitap

4
@Bas Colored emojiのサポートは最新のEdgeプレビューにあり、次のパブリックバージョンに含まれます。
ジョサイアケラー

1
不思議なことに、Ubuntu 16.10ボックスのFirefoxには白黒のグリフが表示されます(後でWin10を起動し、実際に色が付いていることを確認しました)
ルーク

2
@Luke Ubuntuには、Unity 8向けにカラーグリフのサポートが計画されています。
stommestack17年

25

要するに、 Firefoxはこれらのシンボルが見た目で見えるフォントを使用しています。

これらの文字は、Unicode標準の一部です。

Unicodeは、世界のほとんどの書記体系で表現されるテキストの一貫したエンコード、表現、および処理のためのコンピューティング業界標準です。Universal Coded Character Set(UCS)標準とともに開発され、Unicode Standardとして公開されたUnicodeの最新バージョンには、135の現代および歴史的なスクリプトと複数のシンボルセットをカバーする128,000以上の文字のレパートリーが含まれています。-ウィキペディア

したがって、ASCII(非常に少ない)とは異なり、Unicodeにはいくつかのシンボルセットが含まれています。現在では、どのコードがどのアルファベットまたはシンボルを表すかについて標準化されていますが、Unicodeはシンボルの外観を正確に指定していません。したがって、すべてのオペレーティングシステムには、独自のシンボルグラフィックスセットがあり、外観が異なります。これには、色付きのものと、アウトラインまたは白黒のみのものが含まれます。

また、フォントがこれらのシンボル用に独自のアートセットを持ち、キャラクターがアプリケーションの感触に合うようにすることも可能です。アプリケーション内でも、さまざまな画像セットを使用するさまざまなページを使用できます。したがって、他の方法でキャラクターとやり取りできますが、見た目が違うだけです。

ここで、さまざまなプラットフォーム絵文字(🌍🌎🌏の場合は#1483にスキップ)がどのように表示されるかを確認できます


4
128,000は描画するアイコンがたくさんあります。フルカラーではなく白黒のアイコンを使用することでアーティストを責めることはありません。
ダン

@ Dan、128,000は記号ではなく文字数です。これらには言語文字も含まれます。これは、日本語や北京語などの言語では膨大な数になります。
パルスジェット

1
@Dan、私は色付けする必要のある128,000個のシンボルがないことを意味しました。色を付ける数は多くないと言っていませんが、128,000に近いとは言えません。
PulseJet

1
ああ、私は多くのことを描くだけでことを、彼らはすべての色付けされなければならないことを意味するというわけではありませんでした何かが、私は(すなわち色)それらのいずれかを複雑にしたくないように十分です。ハハ。
ダン

2
@Danは誰もそれほど多くのコードポイントを描画せず、すべてのUnicodeコードポイントの文字を含むフォントはほとんどありません。現在のフォントにグリフが含まれていない場合、フォントレンダラーは別のフォントのグリフを置き換えます。すべてのUnicodeグリフを含むフォントがないのはなぜですか?
phuclv

2

これらの文字は「仕事」のような他の文字と同じ方法でaøλଶୁ、仕事。文字は抽象的な数字で表されます。この数字は、文字を表示するために使用可能なフォントを選択およびインデックス付けするために使用されます。

お使いのシステムでは、Firefoxが独自のレンダリングを行い、そしてのためにグリフを含むフォントにアクセスしているように見える🌍🌎🌏✅️。他のアプリケーションは通常、Xサーバー(または同等のもの)によって利用可能になったフォントを使用するため、サーバーにインストールまたは指定したフォント(たとえば、xset +fpまたは類似のもの)に制限されます。

マルチカラーフォントは最近の、まだかなり実験的な開発です。従来、フォントグリフは、任意の背景に対して構成できる単一の色です。


1

ブラウザごとに異なります。特定のフォントをWebサイトに追加すると、これらの絵文字が読み込まれます。例えば:

グラフィックデザインに関するこの投稿は無料の絵文字フォントはありますか?面白いかもしれません。このようなカスタムアイコンフォントがないと、ブラウザごとにWebサイトの外観が異なることに留意する必要があります。


これは、人々を絵文字やUnicodeスマイリーにすばやく導くための単なるリストです。


0

これらは単なるUnicode文字なので、システムでフォントとグリフが使用可能であれば、Unicodeをサポートするテキストボックスは問題なく表示できます。ただし、各Unicode文字のルックアンドフィールは、使用されるレンダラーとフォントによって異なります。

従来、文字は単色でのみ塗りつぶされていました。色付きの絵文字は非常に新しいものであるため、サポートはプラットフォームによって異なります。様々な技術が着色するために発明されているように埋め込まれたPNG画像、SVGsまたは層状のマスク。しかし、それらはすべて、古いOSでは利用できなかった新しいレンダラーを必要とします。

その結果、バージョン50.0以降、Firefoxには色付き絵文字をサポートするための独自のレンダラーとフォントが埋め込まれています。リリースノートで見つけることができます

かわった

ネイティブ絵文字フォントを使用しないオペレーティングシステム用の組み込みの絵文字セットを追加しました(Windows 8.0以前およびLinux)

フォントファイルは次の場所にあります。 %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.