이 아이콘은 어떻게 작동합니까 : 🌍🌎🌏✅️?

123

이 문자들을 컬러 아이콘으로 볼 수 있습니다.

🌍🌎🌏✅️

Firefox에서만 작동합니다. 문자가 컬러로 보이지 않으면 시스템에서 다음과 같이 보입니다 (글꼴에 따라 다름).

이미지 설명

방화범과 탭 제목에서도 볼 수 있습니다.

이미지 설명

그리고 그것들 의 전체 파일 이 있습니다. 또한이 document.title 애니메이션을 사용하여 HTML 외부에서도 작동 함을 보여줍니다.

그게 뭐야?

firefox unicode

— 토 마쉬 자토
소스

의견은 긴 토론을위한 것이 아닙니다. 이 대화는 채팅 으로 이동 되었습니다 .

— Journeyman Geek

저는 Opera를 사용하고 있으며 "이것처럼 보이는"이미지에서 보여준 방식을 확실히 보지 못합니다. 그래서, 나는 당신의 질문에서 그것을 편집하고 싶지만 그다지 중요하지는 않습니다 ...

— Stephan Bijzitter

37

@StephanBijzitter : 당신과 다른 사람들이 그런 식으로 아이콘을 볼 수 없다는 사실 은 이미지가 중요한 이유 입니다. 제거하지 마십시오.

— user2357112

3

youtube.com/watch?v=tITwM5GDIAI

— J. Hougaard

2

키워드 : OpenType-SVG ( stateofwebtype.com/#OpenType-SVG , color.typekit.com )

— Prinzhorn

145

이 문자는 각 문자가 나타내는 것을 정의하는 유니 코드 표준에 의해 인식되는 이모티콘입니다.

그것들에 대한 정확한 모습은 OS와 응용 프로그램마다 다르지만 모두 같은 것을 묘사합니다.

지구본 (🌏)은 유니 코드 문자 1F30F이며 EARTH GLOBE ASIA-AUSTRALIA 라고 합니다. 두 번째 것 (✅)은 WHITE HEAVY CHECK MARK 라고하며 유니 코드 2705입니다.

이러한 방식으로 수천 개의 이모지가 있으며, 일부는 모든 응용 프로그램에서 지원하고 일부는 덜 지원됩니다. 여기에 전체 목록을 참조하십시오 http://www.fileformat.info/info/emoji/browsertest.htm

— 이스 로엘 기술
소스

56

글꼴은 문자의 모양을 정의하고 이모티콘은 문자 일 뿐이므로 정확한 모양은 사용하는 글꼴에 따라 다릅니다.

— totymedli

23

실제로 두 번째는 VARIATION SELECTOR-16 과 결합 된 WHITE HEAVY CHECK MARK 입니다. 질문에서 복사 한 copied️은 녹색 상자에 흰색 확인 표시로 표시되고, from 답변에서 복사 된 ✅에는 검은 색 테두리가있는 흰색 확인 표시로 표시됩니다. 녹색 상자에 동일한 ✅️ 흰색 확인 표시가 있습니다. 명확성을 위해이 댓글의 스크린 샷

— Stijn

4

글꼴이 제대로 지원되지 않아 눈치 채지 못할 수 있습니다. 브라우저에서 녹색 배경이 표시되지 않습니다.

— user2357112

8

@Stijn, Chrome에서 저에게는 모두 녹색 체크 표시 i.imgur.com/Cv5RTFM.png

— Yisroel Tech가

6

이 질문에 대답하지 않습니다 . 이모티콘이 왜 존재 하는지 가 아니라 Firefox에서 어떻게 렌더링 되는지 에 관한 것입니다.

— oldmud0

73

Firefox는 이 이모 지 문자에 특수 글꼴 을 사용하고 있습니다. TrueType 글꼴의 레이어드 컬러 글리프와 같이 비교적 새롭고 거의 사용되지 않는 기능을 사용합니다. 그 이외의 것 (예 : 미리 채색 된 글리프가있는 특수 글꼴)은이 아이콘이 일반적인 유니 코드 문자입니다.

Windows는 버전 8.1 이상에서만 이러한 색상 글꼴을 기본적으로 지원 하므로 Firefox는 EmojiOne을 비공개로 설치하고 Windows 7에서 자체 글꼴 렌더러를 사용합니다. 이는 대부분의 다른 응용 프로그램에서 색상 이모티콘 아이콘이 없음을 설명합니다.

— aitap
소스

2

Win10에서 레이어 색상 글리프를 기본적으로 지원하는 경우 Edge와 같이 여전히 흑백으로 표시되는 이유는 무엇입니까?

— Bas

5

@Bas, Edge 개발자 도구를 통해 알 수 있듯이 Segoe UI Emoji는이 페이지를 표시하도록 선택되지 않습니다 (다른 단색 글꼴은 표시). font-family 속성에 글꼴을 삽입하면 트릭이 수행됩니다. i.imgur.com/IXiNC86.png

— aitap

4

@Bas Colored emoji 지원은 최신 Edge 미리보기로 제공되며 다음 공개 버전으로 제공 될 예정입니다.

— Josiah Keller 17

1

흥미롭게도 Ubuntu 16.10 상자의 Firefox는 흑백 글리프를 표시합니다 (나중에 Win10으로 부팅 한 후 실제로 컬러로 표시됨)

— Luke

2

@Luke 우분투 유니티 제 계획 컬러 글리프 지원 갖는다

— stommestack

25

한마디로 : Firefox는 이러한 기호가 보이는 모양의 글꼴 을 사용합니다 .

이 문자는 유니 코드 표준의 일부입니다.

유니 코드는 대부분의 세계 쓰기 시스템에서 표현 된 텍스트의 일관된 인코딩, 표현 및 처리를위한 컴퓨팅 산업 표준입니다. UCS (Universal Coded Character Set) 표준과 함께 개발되고 Unicode 표준으로 게시 된 최신 버전의 유니 코드에는 135 개의 현대적이고 역사적인 스크립트와 여러 기호 집합을 포함하는 128,000 개 이상의 문자 레퍼토리가 포함되어 있습니다. 위키 백과

따라서 ASCII (매우 적은)와 달리 유니 코드에는 여러 기호 세트가 포함됩니다. 이제 어떤 코드가 어떤 알파벳이나 기호를 나타내야하는지 표준화되었지만 유니 코드는 기호의 모양을 정확하게 지정하지 않습니다. 따라서 모든 운영 체제마다 다르게 보이는 고유 한 심볼 그래픽 세트가 있습니다. 여기에는 색이 칠 해지고 일부는 윤곽이나 흑백이 될 수 있습니다.

또한, 글꼴이 이러한 기호에 대한 고유 한 아트 세트를 가질 수 있으므로 문자가 응용 프로그램의 느낌에 따라 움직일 수 있습니다. 응용 프로그램 내부에서도 다른 이미지 세트를 사용하는 다른 페이지가있을 수 있습니다. 따라서 다른 방식으로 캐릭터와 상호 작용할 수 있지만 다르게 보일 것입니다.

다양한 플랫폼 에서 이모지가 정확히 어떻게 보이는지 알 수 있습니다 (여러분의 경우 # 1483로 건너 뛰기) .

— 펄스 젯
소스

4

128,000은 그릴 아이콘 이 많습니다 . 나는 풀 컬러 대신 흑백 아이콘을 사용한다고 아티스트를 비난하지 않습니다.

— Dan

@Dan, 128,000은 기호가 아닌 문자 수입니다. 여기에는 일본어 나 만다린과 같은 언어에는 많은 언어 문자가 포함됩니다.

— PulseJet

1

@ Dan, 나는 128,000 개의 기호가 없어야한다는 것을 의미했습니다. 채색 할 것이 많지는 않지만 128,000에 가깝습니다.

— PulseJet

1

아, 나는 많은 것을 그리기 단지 것을, 그들은 모두 색깔되어야 함을 의미하는 말은하지 않았다 아무것도 나에게 그 어떤 복잡 할 (예 : 색상)하지 수 있도록 충분하다. 하하.

— Dan

2

@Dan은 많은 코드 포인트를 그리지 않으며, 모든 유니 코드 코드 포인트에 대한 문자를 포함하는 글꼴이 거의 없습니다. 글꼴 렌더러는 현재 글꼴에 해당 글리프가 포함되어 있지 않으면 다른 글꼴의 글리프를 대체 합니다. 모든 유니 코드 글리프가 포함 된 글꼴이없는 이유는 무엇입니까?

— phuclv

2

이 문자 "작업"같은 다른 문자와 같은 방식으로 a, ø, λ, ଶୁ, に와 晨, 작동합니다. 문자는 추상 숫자로 표시되며 문자를 표시하기 위해 사용 가능한 글꼴을 선택하고 색인을 생성하는 데 사용됩니다.

시스템에서 파이어 폭스가 자신의 렌더링을 수행하고, 글리프가 포함 된 글꼴에 액세스 할 수 있는지 표시 🌍, 🌎, 🌏와 ✅️. 다른 응용 프로그램은 일반적으로 X 서버에서 사용 가능한 글꼴 (또는 이에 상응하는 글꼴)을 사용하므로 서버에 설치했거나 서버에 지정한 글꼴 (예 : xset +fp유사하거나 이와 유사한 글꼴)로 제한됩니다 .

다색 글꼴은 최근에 여전히 실험적으로 개발 된 것입니다. 일반적으로 글꼴 글리프는 모든 배경에 대해 구성 할 수있는 단일 색상입니다.

— 토비 스피
소스

1

브라우저마다 다르므로 웹 사이트에 특정 글꼴을 추가하면이 이모티콘에 로드됩니다 . 예를 들면 다음과 같습니다.

그래픽 디자인에 관한이 글 무료 이모티콘 글꼴이 있습니까? 흥미로울 수도 있습니다. 이러한 사용자 정의 아이콘 글꼴이 없으면 모든 브라우저에서 웹 사이트가 다르게 보일 수 있음을 명심해야합니다.

_{이 목록은 사람들에게 이모 지와 유니 코드 스마일을 더 빨리 안내하기위한 것입니다.}

— 요원
소스

0

이는 유니 코드 문자 일 뿐이므로 시스템에서 글꼴 및 글리프를 사용할 수있는 경우 유니 코드를 지원하는 모든 텍스트 상자에서 문제없이 표시 할 수 있습니다. 그러나 각 유니 코드 문자 의 모양과 느낌 은 사용 된 렌더러 및 글꼴에 따라 다릅니다.

일반적으로 문자는 단색으로 만 채워집니다. 컬러 이모티콘은 매우 새로운 기능이므로 지원은 플랫폼마다 다릅니다. 임베디드 PNG, SVG 또는 레이어 마스크 와 같은 컬러링을위한 다양한 기술이 개발되었습니다 . 그러나 모두 오래된 OS에서는 사용할 수 없었던 새로운 렌더러가 필요합니다.

결과적으로 버전 50.0 이후 Firefox는 컬러 이모지를 지원하기 위해 자체 렌더러 및 글꼴을 내장했습니다. 릴리스 노트 에서 찾을 수 있습니다

변경됨

기본 이모티콘 글꼴이없는 운영 체제 용 기본 제공 이모티콘 세트 추가 (Windows 8.0 이하 및 Linux)

글꼴 파일은 %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf

— 푸클
소스