1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Google 推出線條版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中

Google 推出線條版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中

2022/05/04

梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中
  Emoji表情圖示是經常被拿來,運用在社群貼文或是聊天工具中,有使用過的朋友都知道,Emoji表情圖示都是彩色的,因此當使用太多的Emoji表情圖示,整個版面或是聊天訊息中,就會顯得相當的雜亂,因此Google則推出一系列的Emoji表情圖示,同時是以簡約的線條為設計方向。

即便是套用到網頁中,也不會顯示突出,甚至Google所推出的Emoji表情圖示,還支援雲端字型,甚至還可自行選擇所需的線條粗細,且將線條版的Emoji表情圖示,運用在自行的網頁中,不但相當的有設計感,還可透過CSS的方式,來設定Emoji表情圖示的大小與顏色,因此身為網頁設計的你,也趕快來看看囉!


Google Noto Emoji表情圖示
Step1
首先在進入Google Noto Emoji的表情圖示字型後,可從右邊勾選所需的Emoji線條粗細。
梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中
Step2
在勾選完畢後,將右下的二個方框的文字複製起來。
梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中
Step3
分別將link放置在HTML中,接著在CSS中建立一個類別,再把文字字型貼上。
梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中
Step4
都完成後,接下來就尋找所需的Emoji的表情圖示後,將它選取並複製。
梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中
Step5
接著再把它貼它icon類別的標籤中,這時會發現到,在HTML中的Emoji則是彩色的,在經由CSS套用後,就變成線框樣式。
梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中
Step6
這時就可透過CSS的文字字級與顏色,來改變Emoji的大小與色頁啦!有了Google Noto Emoji表情符號的雲端字型,讓網頁使用Emoji變得更加有質感啦!
梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中