[工具方法]_使用google fonts一致化所有使用端的字型觀看效果+webgradients漸層工具

Published on:

當作品上傳至公共網絡空間後,
網頁使用的字型會因為各使用端沒有安裝該使用字型,而直接轉換成默認字型。
這樣就會讓原設計想傳達的視覺體驗有了些許落差。

為了避免這種情況,最佳的方式是使用網路上開源的字型css。
有使用過模板的同學一定會發現,模板附上的css檔上,
會有類似下圖程式碼。這便是指定抓取開源程式碼的路徑。


那該如何尋找類似開源字型呢?就google吧!

google大神集中提供了非常棒的工具: https://fonts.google.com/

進到網站後,你可以挑選喜歡的字型,
並且多加測試,看看是否符合需求。

有喜歡的話就按右上角的“+”號進行收藏,
點擊下方收藏欄就得到安裝以及如何使用的程式碼。

更可以針對某種字型中的特定型式,
來選取收藏產生安裝程式碼。

若想要細緻比較字體搭配狀況,
按下箭號,會跳至頁面給你測試看看。
更可以按下安裝符號,直接將字型安裝在自己的裝置中。

以上是非中文字型的找尋方法。那中文呢?

中文字目前放置於about頁面下的Early Access
進入後cmd+f,搜尋chinese就可以找到了,目前基本是有思源體

使用方式:

  • 進到我們常使用的scss檔案中,直接丟入@import。

  • 再來就是在每個class下去做調整。

這裡font-family系統抓取字型的習慣是,先抓第一個,
第一個沒有符合使用的話,再抓第二個,以此類推。

以我的作品為例,
我希望英文字型不要使用cwTeXYen,而是Tenor Sans
所以就將Tenor Sans寫在最前面。
(但其實是cwTeXYen中沒有英文字體的應用,如果在cwTeXYen中找不到英文,
系統會自己去尋找其他的英文默認字體,但絕對不會先找Tenor Sans。)

以下就是我一小段文字的搭配方式。



同場加映:超快速做出漸層背景。

點入https://webgradients.com/網站,
瀏覽挑選後點下Copy CSS

你就copy到像這樣的程式碼:
background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);

再直接貼在想要執行的相對應處。

(註:-webkit-filter:opacity(.5) 是調整背景圖片透明度的語法,靠後面數值變化。

就得到一個漸層背景啦。


後記:

目前這應該是比較冷門也非必要的知識點,
但希望可以幫助到對字型在意的同學們。

參與大賽後才真切地發現前端設計實在是宇宙大的坑,
一般最基本的平面設計用繪圖軟體非常直覺,比起程式前端視覺操作,
根本就是擁有上帝意識般的呼風喚雨。
而在目前貧弱的css及html技能之下,
我連網站的基本排版、元素細微修改都是苦痛。

目前我的作品版本是真切掙扎了三天結果,還有很多地方都很不足,
(譬如最痛點就是目前版本的最適觀看口必須是13寸屏,😭)
但就先嘗試到這了,要更熟悉網站功能創建才是,
畢竟功能才是目前學習中最為重要的。夥伴們!一起繼續加油!

如果對你有幫助就給點關愛吧!
歡迎給予更多其他的建議及技術提點。(要學的真的好多好多。)

Comments

comments powered by Disqus