iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
1

前言

不得不說google真的很厲害!開發了各種便利的好東西
完全滲入工作與生活中...
(現在不用google家產品的應該寥寥無幾吧QQ)

今天想跟大家分享Google Fonts的使用方式!
在這邊先感謝優秀的前端工程師 King Tzeng...
在參加鐵人之前,今年其實我參加了「前端精神時光屋
在九週內,每週切一版的不間斷挑戰(今年是到底為什麼要這樣搞死自己我也不知道...)

參加時光屋的時候,真的受到King Tzeng很多幫忙!

今天要分享的Google Fonts用法,就是在參加精神時光屋時,King Tzeng教我的!

那麼,以下進入正文/images/emoticon/emoticon35.gif


Google Fonts

步驟一:客倌先來看看今天想吃什麼?(店小二貌)

首先先到google字型網站挑選喜歡的字型!

google font

步驟二:在你的網頁中加入需要的字型

選擇需要的字型(+)之後,點開右下角的視窗並選擇加入的方法(Standard or @import)

google font

步驟三:設定字型

以上都完備之後,就只要設定font-family就好囉!
很容易吧/images/emoticon/emoticon07.gif

實際範例看codepen

google font


又讓我撐了一天...好險好險...(咦!?)
20181101被嫌棄了趕快補張結果圖!!!(手忙腳亂貌) /images/emoticon/emoticon16.gif


上一篇
與工程師的協作之路-溝通篇(那些難以啟齒的事)
下一篇
與工程師的協作之路-色彩篇(色彩的基礎)
系列文
學什麼就寫什麼,知道什麼就分享什麼31

2 則留言

0
tacodrem
iT邦新手 5 級 ‧ 2018-11-02 11:06:18

?!
好短!!
至少也放個引入完成後的demo截圖之類的吧XDDDD
/images/emoticon/emoticon31.gif

看更多先前的回應...收起先前的回應...

XDDDDD

(糟糕被嫌棄)

哈哈哈~
改好快!!
馬上就補了XDDD
感謝不嫌棄我這路過的亂講話~
/images/emoticon/emoticon16.gif

效率效率!還有敞開心胸聽建議XD

0
King Tzeng
iT邦新手 4 級 ‧ 2018-11-02 11:52:54

原來在文章裡面可以幫助會員(重點誤......
我沒有教你什麼,是你自己學的好嗎~太客氣啦~~/images/emoticon/emoticon16.gif

/images/emoticon/emoticon25.gif有啦有啦~~~

一起學習啦~我很多設計方面的問題也是問你壓~~/images/emoticon/emoticon25.gif

/images/emoticon/emoticon35.gif

我要留言

立即登入留言