1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Google Roboto Flex 變形雲端字型,線上隨即調整立即套用

Google Roboto Flex 變形雲端字型,線上隨即調整立即套用

2022/05/16

梅問題-Google Roboto Flex 變形雲端字型,線上隨即調整立即套用
  目前主流的雲端字型,不外乎就是Google了,除了提供大量的英文雲端字型外,甚至也有提供繁體中文,就是大家所熟悉的思源黑,讓網頁終於打破那101種的新細明體,同時再也不用擔心使用者電腦是否沒有安裝此字型,同時Google的雲端字無流量限制,且也無需註冊會為員,只需自行選擇所需的字體樣式,再自行嵌入網頁中,立即就可使用,但無論是中文還是英文,所有的文字粗細、字寬與傾斜。

但最近Google與Font Bureau 合作推出了一款,可變形的雲端字型,讓使用者可以自行的設定文字的粗細、字寬、傾斜,且立即設定立即就可套用,完全無需下載,雖然它裡面一共有十一個微調選項,可自行來作調整,但經梅干實測的結果,當要套用到雲端字型,目前只有粗細、字寬、傾斜有反應,因此若各位其它的設定值,調整後也有反應外,再請告知一下梅干一下,那現在就先來看看,如何來自設定可變形雲端字型 Google Roboto Flex 吧!


Google Roboto Flex
連結網址:fonts.google.com

Step1
首先在進入Roboto Flex後,左手邊有許多調整鈕,可自行的拖拉改變數值。
梅問題-Google Roboto Flex 變形雲端字型,線上隨即調整立即套用
Step2
當拖拉調整數值後,右邊立即會顯示已調整後的字體樣式,在調整完畢後,按右下的Select選擇鈕。
梅問題-Google Roboto Flex 變形雲端字型,線上隨即調整立即套用
Step3
選擇完畢後,右側欄就會出現該字型的CSS相關設定,再把上面的設定複製起來。
梅問題-Google Roboto Flex 變形雲端字型,線上隨即調整立即套用
Step4
在貼到網頁中,立即就可顯示剛所設定的文字樣式,是不是很神奇呀!真期待日後若中文字也可以這樣子,就太完美了,因此想要來點不一樣的英文雲端字型,不妨可試試看囉!
梅問題-Google Roboto Flex 變形雲端字型,線上隨即調整立即套用