題 這些圖標如何工作:🌍🌎🌏️?


我可以將這些字符看作彩色圖標:

它只適用於我的Firefox。如果你看不到顏色的字符,它在我的系統上看起來像這樣(它可能與字體有關):

image description

我甚至可以在firebug和tab標題中看到它們:

image description

image description

image description

有完整的文件 他們我也這樣做了 document.title動畫 與他們,這表明他們甚至可以在HTML之外工作。

那是什麼?


120
2018-02-01 00:28


起源


評論不適用於擴展討論;這次談話已經開始了 轉移到聊天。 - Journeyman Geek♦
我正在使用Opera,我絕對不會按照你在圖片中顯示的方式看到它們“它看起來像這樣”。所以,我很想從你的問題中編輯出來,但這不會很大...... - Stephan Bijzitter
@StephanBijzitter:你和其他人沒有看到這樣的圖標的事實 為什麼 圖像很重要。不要刪除它。 - user2357112
youtube.com/watch?v=tITwM5GDIAI - J. Hougaard
關鍵字:OpenType-SVG(stateofwebtype.com/#OpenType-SVG, color.typekit.com) - Prinzhorn


答案:


這些字符是由Unicode標準識別的表情符號,它定義了每個字符所呈現的內容。

對於每個操作系統和每個應用程序,它們的確切外觀是不同的,但都描述了相同的內容。

globe()是Unicode字符 1F30F 並且是   EOBH GLOBE ASIA-AUSTRALIA。第二個()是   白色重型檢查標記 並且是Unicode 2705。

以這種方式,有成千上萬的表情符號,一些是每個應用程序支持的,一些是支持較少的。請在此處查看完整列表 http://www.fileformat.info/info/emoji/browsertest.htm


144
2018-02-01 01:04



它們的確切外觀取決於您使用的字體,因為字體是定義字符外觀的方式,而表情符號只是字符。 - totymedli
實際上,第二個是(如你所說) 白色重型檢查標記 結合 VARIATION SELECTOR-16。 ️從問題複製看起來像一個綠色框中的白色複選標記,從你的答案複製看起來像一個黑色邊框的白色複選標記,當我粘貼變化選擇器後你的白色複選標記與黑色邊框,我得到相同的️綠色框中的白色複選標記。 為清晰起見,此評論的屏幕截圖 - Stijn
由於字體支持不佳,他們可能沒有註意到。在我的瀏覽器上,綠色背景不顯示。 - user2357112
@Stijn,對我來說,他們兩個都是綠色框的複選標記 i.imgur.com/Cv5RTFM.png - Yisroel Tech
這不能回答這個問題 怎麼樣 它是在Firefox中呈現的,而不是 為什麼 表情符號在那裡。 - oldmud0


Firefox正在使用 特殊字體 對於這些 表情符號字符。它採用了一種相對較新且很少使用的TrueType字體功能:分層顏色字形。除此之外(即具有帶有預著色字形的特殊字體),這些圖標是普通的Unicode字符。

Windows本機支持這些彩色字體 僅在版本8.1及更高版本中因此Firefox私下安裝EmojiOne並在Windows 7中使用自己的字體渲染器。這也解釋了大多數其他應用程序中沒有彩色表情符號圖標。


72
2018-02-01 11:41



如果在Win10中對分層顏色字形有原生支持,為什麼它們仍然以單色顯示,例如Edge? - Bas
@Bas,正如我們通過Edge開發人員工具所看到的,Segoe UI Emoji沒有被選中顯示此頁面(其他單色字體)。將字體插入font-family屬性可以解決問題: i.imgur.com/IXiNC86.png - aitap
@Bas彩色表情符號支持是最新的Edge預覽版,將在下一個公開版本中。 - Josiah Keller
奇怪的是,我的Ubuntu 16.10盒子上的Firefox顯示黑白字形(之後我已經啟動進入Win10並確認它們確實是彩色的) - Luke
@Luke Ubuntu為Unity 8計劃了彩色字形支持。 - Jop V.


簡而言之:Firefox使用了 字形 這些符號看起來像他們一樣。

這些字符是Unicode標準的一部分。

Unicode是一種計算行業標準,用於在世界上大多數書寫系統中表達的文本的一致編碼,表示和處理。最新版本的Unicode與通用編碼字符集(UCS)標準一起開發並作為Unicode標準發布,包含超過128,000個字符的字符集,涵蓋135個現代和歷史腳本,以及多個符號集。 -Wikipedia

因此,與ASCII(只有極少數)不同,Unicode包含幾個符號集。現在,雖然已經標準化了什麼代碼應代表什麼字母或符號,但Unicode並未準確指定符號的外觀。因此,所有操作系統都有自己的符號圖形集,看起來不同。這可能包括一些被著色,一些只是輪廓或黑色和白色。

此外,字體也可以為這些符號設置自己的藝術品,以便字符可以與應用程序的感覺一致。即使在應用程序內部,您也可能使用不同的圖像集來使用不同的頁面。因此,您可以像其他人一樣與角色互動,但它看起來會有所不同。

您可以在各種平台上看到完全表情符號(對於,跳到#1483) 這裡


25
2018-02-01 05:16



128,000是一個 批量 的圖標繪製。我不怪藝術家用黑白圖標代替全彩。 - Dan
@Dan,128,000是字符數,而不是符號。這些也包括語言字符,這些字符對於日語或普通話等語言而言是巨大的。 - PulseJet
@Dan,我只是意味著沒有128,000個符號需要著色。並不是說有很多顏色,但這遠遠不到128,000。 - PulseJet
啊,我並不是故意暗示他們都應該被塗上顏色,而只是吸引了許多人 什麼 足以讓我不想讓它們中的任何一個變得複雜(即顏色)。哈哈。 - Dan
@Dan沒有人繪製那麼多代碼點,幾乎沒有字體包含所有Unicode代碼點的字符。字體渲染器將 替代 當前字體不包含這些字形時,來自另一種字體的字形。 為什麼沒有包含所有Unicode字形的字體? - phuclv


這些字符與其他字符“工作”的方式相同,例如 aøλଶୁ 和 ,工作。字符由抽像數字表示,用於選擇和索引可用字體以顯示字符。

在您的系統上,Firefox似乎有自己的渲染,並且可以訪問包含字形的字體 和 。其他應用程序通常會使用X服務器(或等效服務器)提供的字體,因此僅限於您已安裝或指向服務器的字體(例如, xset +fp 或類似的)。

多色字體是最近的,仍然是相當實驗性的發展;傳統上,字體字形是可以針對任何背景組成的單一顏色。


2
2018-02-06 09:57





每個瀏覽器都有不同之處,您可以在網站上添加特定字體,然後加載這些字體 表情符號。例如:

這篇文章在圖形設計上發布 有免費的表情符號字體嗎? 也可能很有趣。 如果沒有這樣的自定義圖標字體,您必須記住,您的網站在每個瀏覽器中看起來都不同。


這只是一個列表,旨在引導人們更快地表達emojis和unicode表情。


1
2018-02-07 12:42





這些只是Unicode字符,因此任何支持Unicode的文本框都可以毫無問題地顯示它們,前提是字體和字形在系統上可用。但是,每個Unicode字符的外觀取決於渲染器和用於它們的字體。

傳統上,字符只用一種顏色填充。彩色表情符號是一個很新的東西,因此它們的支持因平台而異。 已經發明了各種用於著色的技術 喜歡 嵌入式PNG,SVG或分層掩碼。但是所有這些都需要一個新的渲染器,這在舊操作系統中是不可用的。

因此,自版本50.0以來,Firefox已嵌入自己的渲染器和字體以支持彩色表情符號。你可以在裡面找到它 發行說明

為沒有本機Emoji字體的操作系統添加了內置的表情符號集(Windows 8.0及更低版本和Linux)

可以在中找到字體文件 %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf


0
2018-05-22 13:47