幫網站導入 Google 雲端中文字型,立即享用黑體和宋體,提升閱讀舒適性

好的字型,絕對有助於提升使用者在網頁停留的閱讀時間。 Google 免費提供了兩款雲端字型,思源黑體( Noto Sans TC )和思源宋體( Noto Serif TC ),可以在網頁開啟時動態載入,提升閱讀的舒適性,進而增加眼球的黏著度。

我通常選擇 Light 300 樣式,不會太細,也不會太粗,閱讀起來比較舒服。當然如果需要粗體字或作為標題的話,就需要 Bold 系列了。

Google 免費提供的思源黑體( Noto Sans TC )雲端字型,透過 6 個步驟即可在網頁上動態載入。
Google 免費提供的思源黑體( Noto Sans TC )雲端字型,透過 6 個步驟即可在網頁上動態載入。

操作步驟

操作步驟詳述如下:

  1. 首先來到思源黑體( Noto Sans TC )和思源宋體( Noto Serif TC )的網頁。
  2. 在「 Type here to preview text 」欄位裡輸入要用來預覽效果的中文字(比方說就打「思源黑體」或「思源宋體」),也可以不輸入,使用預設的英文字「 Almost before we knew it, we had left the ground. 」。
  3. 在「 Type here to preview text 」欄位旁邊的是「Font size」(字型大小),用來調整預覽字體的大小。
  4. 透過點擊「 + Select this style 」,新增想要使用的字體樣式,例如 Light 300 。此時,右邊會跑出一塊「 Selected family 」,上半部的「 Review 」可以確認是否選對字型,下半部的「 Use on the web 」就是要用來嵌入網頁的雲端字型程式碼。
  5. 雲端字型的嵌入,是透過引用 CSS ,支援 link@import 兩種語法,所以擇一把這段程式碼複製起來,加到網頁的 head 區塊中,比方說 </head> 結尾標籤的前面。
  6. 這樣網頁就具備動態載入 Google 雲端字型的能力了,接著在需要使用到地方,透過 CSS 語法指明 font-family ,所以複製這行程式碼,以套用至 body 全域為例,可以這樣設定: <body style="font-family: 'Noto Sans TC', sans-serif;">

示範網頁

雖然 Mac 電腦和 iPhone/Android 手機的內建字型也很漂亮,但是指定同款雲端字型,在所有設備上面,可以有更一致的呈現。示範網頁請點這裡,網頁原始碼請點這裡。 LINE 機器人的 LIFF 網頁也很適合,請點這裡

在 LINE TECHPULSE 2020 的 LAE 攤位展示自動扭蛋機

台灣 LINE 開發者的年度技術盛會,就是年底的 LINE TECHPULSE 活動,今年是 2020/12/18 在台北南港展覽二館。 2020 年非常榮幸成為 LINE 日本東京總部認證的 API Expert 技術專家(簡稱 LAE ),因此有機會受邀在 LAE 攤位展示彰化旅行+半線保衛戰實境解謎遊戲破關後才會出現在玩家面前的「自動扭蛋機」。用手機掃描 QR Code ,扭蛋就會自動轉下來喔,運用了 LIFF 網頁及 IoT 物聯網技術。

非常榮幸受邀在 LAE 攤位展示彰化旅行+的半線保衛戰實境解謎遊戲破關後才會出現的「自動扭蛋機」。
非常榮幸受邀在 LAE 攤位展示「自動扭蛋機」,會場的開發者民眾們都排隊等著掃描 QR Code 、領取扭蛋裡的小驚喜。

閱讀全文〈在 LINE TECHPULSE 2020 的 LAE 攤位展示自動扭蛋機〉

《聊天機器人的應用》演講@東海大學資工系

今天傍晚來到有大草皮、有教堂、有很多樹和古色古香建築物的東海大學,跟同學們分享「聊天機器人的應用」這個主題。

《聊天機器人的應用》演講@東海大學資工系
《聊天機器人的應用》演講@東海大學資工系

閱讀全文〈《聊天機器人的應用》演講@東海大學資工系〉