Google Font API - 替你的網站加入豐富字體

以往的網頁設計師在設計網頁的時候,時常會遇到一個問題便是可使用字體的不足。在以往的瀏覽器中,即便我們設定了特定的字體,但若是使用者的電腦中沒有該字體則無法顯示。而Google Font API的出現便是替廣大網頁設計師、開發者們解決這個問題!
評論
評論

以往的網頁設計師在設計網頁的時候,時常會遇到一個問題便是可使用字體的不足。在以往的瀏覽器中,即便我們設定了特定的字體,但若是使用者的電腦中沒有該字體則無法顯示。而 Google Font API 的出現便是替廣大網頁設計師、開發者們解決這個問題!

以往的狀況

誠如序文所提到的,以往在網頁上,我們能使用的字體大多侷限於使用者端所安裝的字體,也就是,即便網頁設計者使用了多炫的字體,若是使用者沒有安裝同樣的字體,則仍然無法顯示。

因此在以往,網頁設計者往往會如下圖一般將字體作成圖片,並且搭配 CSS 的一些技巧來將文字替換為文字:

這樣作有不少缺點,除了缺乏彈性之外,使用者也沒有辦法複製圖片上的文字。

@font-face

為了解決這個問題,CSS2(不是 CSS3)就有提供一個@font-face 屬性可以讓 CSS 設計者加入自己喜歡的字體。但問題是,各家瀏覽器對於@font-face 的支援進度緩慢,一直到去年大多數的瀏覽器才開始正式支援@font-face,而問題並未結束,每個瀏覽器所支援的字型格式又有不同,對於大說數網頁設計者而言仍然不易上手。

除此之外,@font-face 必須將字體上傳到網路上、讓讀取頁面的使用者瀏覽器可以下載、並且顯示,而這又帶來兩個問題:首先、字體檔案一般而言檔案都相當的大,若是將檔案存放在自己的主機上必然會對流量造成一定的負擔。另外一個問題則牽涉到字體的授權問題,由於一般我們所購買的字體授權都僅能提供個人使用,而@font-face 實際上如同於將字體放在網路上提供給大家下載,會有一些侵權的疑慮。

Typekit & WebFonts



TypekitWebFonts 這兩間雲端字體服務便是替大家解決上述的兩個問題,除了提供各種沒有授權問題的字體外、我們也不需要擔心字體存放、流量的問題,這部份統統都交給服務商的雲端主機管理。

然而,這些服務當然並非免費,以 Typekit 而言最基本的收費是$24.99 美金起跳,如下圖:

雖然如此,但許多網頁設計師們仍然趨之若騖,畢竟這些服務的確解決了長久以來的字體問題。

Google Font API


Google Font API 是在今年剛落幕的 Google I/O 開發者大會中所公佈的新服務,提供了一個簡單的介面讓網頁開發者、設計師能夠嵌入漂亮的字體到自己的網頁當中。如 Google 新聞稿中所說,這項服務是 Google 與上述所提到的 Typekit 一同合作打造出來的,且是完全免費的。
Google Font Directory 中可以看到 Google 在公佈 API 的同時也開放了如下圖十八種不同的字體:

除此之外,Google Font API 對於各瀏覽器的支援也相當不錯,如下:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

使用方法

在使用上,我們只需要在 HTML 文件中加入以下 CSS 檔(後方參數可以替換為 Google Font Directory 上的任一字體):

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

然後針對需要修改字體的段落加入 CSS 片段、如:

h1 { font-family: 'Yanone Kaffeesatz', arial, serif; }

這樣就可以順利使用這些漂亮的字體了!

參考資源


AWS For Data Web Day:5 / 25 免費線上研討會,帶領企業制定現代化數據戰略

AWS 將於 2022 年 5 月 25 日 下午 2:00~5:00 舉行線上研討會 AWS For Data Web Day,以「數據與分析」為本次活動主旨,幫助企業制定現代化數據戰略,除了精彩內容外,同時也邀請了 3 位知名產業經驗的客戶進行分享,讓您了解在產業實務上 AWS 如何協助企業進行轉型。
評論
評論

數位轉型是一段不斷學習與創新的過程。身為雲端服務龍頭,AWS 從過去到現在從未停止創新,且為了幫助企業客戶在數據為王的時代,能有效利用數據資料獲得深入洞察、搶得市場先機,AWS 將於 2022 年 5 月 25 日 下午 2:00~5:00 舉行線上研討會 AWS For Data Web Day,以「數據與分析」為本次活動主旨,幫助企業制定現代化數據戰略。

2022 年的關鍵任務:制定現代化數據戰略

在討論元宇宙拓荒、搶佔新興科技商機以前,企業是否已經紮穩腳步,建置完善的數據資料庫,建構業務創新的重要基礎?在邁向新時代的關鍵 2022 年,此刻最重要的任務之一,是制定現代化的數據戰略,幫助企業持續數位轉型。對此,AWS For Data Web Day 線上研討會內容,將包含 Amazon DynamoDB 的十年創新之旅,帶領參與者進行新功能重點探討,並且同步深入了解 AWS 現代化企業數據遷移實戰、現代化數據平台大戰略、數據創新與加速分析應用等。

除了詳細解說數據對您企業帶來的影響之外,也邀請到 AWS 實際企業客戶分享成功案例,加速了解如何運用數據與分析進行產業數位轉型。

如何透過 AWS 獲得成功?重量級客戶親自揭密

AWS For Data Web Day 線上研討會本次邀請了重量級來賓,成功企業包含全方位寵物管家 萬達寵物、大數據智能資料稽核與保護的專家 – Datiphy 以及企業數據資產整合專家 – eForce,以上三間知名企業,將親自講授他們是如何透過 AWS 獲得成功,並且在數位轉型上取得領先的地位。

本場研討會,在深入了解該如何提升數據分析的效能的同時,又能兼具成本效益高與安全性;適合對於如何靈活應用大數據、對數據分析有興趣、想要建構數據與分析基本功的所有受眾,例如:公司技術部門決策人、業務決策人、IT 主管及希望深入認識數據分析的任何人士。與會期間參與問答,還有機會抽中百元美食外送平台優惠券。

在 AWS For Data Web Day 中探討雲端數據資料庫的優勢與做法,包括:

  1. 20 萬多個資料湖在 AWS 上執行
  2. 使用 Amazon EMR 比標準 Apache Spark 快 3 倍
  3. 比其他雲端資料倉儲更實惠的價格效能達 3 倍
  4. 使用 Amazon OpenSearch Service 在單個叢集中儲存的資料量可達 3PB
  5. 節省 70% 資料湖中資料的儲存成本

AWS For Data Web Day 報名須知

  • 日期:2022 年 5 月 25 日(星期三)
  • 時間:2:00 PM~5:00 PM
  • 形式:線上研討會

建議在活動前免費註冊 AWS 帳號  ,新註冊戶可兌換精美好禮三合一數據線。若為首次參加線上研討會者,GoToWebinar 會自動偵測電腦配置,可在加入時自動安裝;若是使用手機登入此活動,則需安裝 GoToWebinar 手機應用程式。