![梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中](http://photo.minwt.com/img/Content/webdesign/google-emoji-webfonts/google-emoji-webfonts_00.jpg)
即便是套用到網頁中,也不會顯示突出,甚至Google所推出的Emoji表情圖示,還支援雲端字型,甚至還可自行選擇所需的線條粗細,且將線條版的Emoji表情圖示,運用在自行的網頁中,不但相當的有設計感,還可透過CSS的方式,來設定Emoji表情圖示的大小與顏色,因此身為網頁設計的你,也趕快來看看囉!
Google Noto Emoji表情圖示
Step1
首先在進入Google Noto Emoji的表情圖示字型後,可從右邊勾選所需的Emoji線條粗細。
![梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中](http://photo.minwt.com/img/Content/webdesign/google-emoji-webfonts/google-emoji-webfonts_01.jpg)
Step2
在勾選完畢後,將右下的二個方框的文字複製起來。
![梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中](http://photo.minwt.com/img/Content/webdesign/google-emoji-webfonts/google-emoji-webfonts_02.jpg)
Step3
分別將link放置在HTML中,接著在CSS中建立一個類別,再把文字字型貼上。
![梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中](http://photo.minwt.com/img/Content/webdesign/google-emoji-webfonts/google-emoji-webfonts_03.jpg)
Step4
都完成後,接下來就尋找所需的Emoji的表情圖示後,將它選取並複製。
![梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中](http://photo.minwt.com/img/Content/webdesign/google-emoji-webfonts/google-emoji-webfonts_04.jpg)
Step5
接著再把它貼它icon類別的標籤中,這時會發現到,在HTML中的Emoji則是彩色的,在經由CSS套用後,就變成線框樣式。
![梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中](http://photo.minwt.com/img/Content/webdesign/google-emoji-webfonts/google-emoji-webfonts_05.jpg)
Step6
這時就可透過CSS的文字字級與顏色,來改變Emoji的大小與色頁啦!有了Google Noto Emoji表情符號的雲端字型,讓網頁使用Emoji變得更加有質感啦!
![梅問題-Google 推出線框版的Noto Emoji表情圖示雲端字型,讓你可自行套用到網頁中](http://photo.minwt.com/img/Content/webdesign/google-emoji-webfonts/google-emoji-webfonts_06.jpg)