Canva自型上傳與應用：三款免費商用字體＋自訂字體上傳步驟

在這篇文章中，我們將深入探索 CSS 字體的使用、選擇最佳的 Web 字體以及如何有效整合這些字體到您的網站中。 我們會提供詳細的步驟和範例，幫助您掌握 Web 字體的技術與藝術。

這篇寫給前端工程師的字體指南，從最基本的字體種類、CJK 差異、授權地雷，到可閱讀性與缺字陷阱，帶你一次搞懂網頁字體的眉角，避免讓你的 UI 看起來像缺字的抖音字幕那樣亂七八糟。

首先，我們將從文字的部分開始。 在網頁設計中，字型滿重要的，可以為網頁增加視覺吸引力、改善閱讀體驗，並且讓所有使用者的字體體驗一致。 在這篇我們將學習字體的基本知識，以及如何在網頁中使用字體、Icon Font。

除了使用系統預設字型，進行網頁設計時也常常會使用更多漂亮的「外部字型」，這篇教學會介紹 Google Fonts 外部字型服務，也會示範透過 CSS link 和 @import 和 @font-face 這三種方法載入外部字型。

漂亮的字體可以讓增添網頁個性及可讀性，但要注意載入外部字型 / 字體則會增加網站下載的時間，這兩者的平衡則交由網頁設計師的判斷，本篇介紹如何將外部字型載入 CSS 中

Q. CSS字型嵌入方式 使用方式： 先將所需要的字型檔放入相關資料夾中，我的是放在fonts資料夾中。 基本需要三種字型檔ttf (一般電腦中的字型檔為此種格式或otf), woff (大多瀏覽器支援的格式包含chrome), eot (IE支援的格式)。