【網頁開發設計】專案展示

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

CSS 字型模組定義了與字型相關的屬性以及字體資源的載入方式。 它允許你定義字型的樣式，例如其字族、大小和粗細，以及當多個字形可用於單一字元時要使用的字形變體。

因為 emfont.js 會自動幫你載入字體。 同樣的，你都用 CSS 了要 emfont.js 幹嘛？ 沒有指定字重會載入全部的。 不過瀏覽器很聰明，只會載入有用到的。 範例： /400.css 或是 /400 皆可。 你可以透過參數自訂字體粗細以及包含的文字。 範例： <link href="https://font.emtech.cc/css/jfOpenHuninn?weight=400&words=神乎其技，原其事理。 " rel="styleshee

The CSS font loading module describes events and interfaces used for dynamically loading font resources.

在網頁設計中，字體是影響用戶體驗和頁面美觀的重要元素之一。 通過 CSS 中的 font-family 屬性，你可以輕鬆控制網頁中文本的字體樣式，讓網站看起來更具個性化和專業性。 此外，Google Fonts 提供了豐富的免費字體，讓開發者能夠輕鬆使用高品質的字體資源。

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

在 CSS 中，我們使用 font-family 屬性來指定文字的字型。 注意：如果字型名稱包含多個單詞，則必須用引號括起來，例如："Times New Roman"。 提示： font-family 屬性應該包含多個字型名稱作為“備用”系統，以確保瀏覽器/作業系統之間的最大相容性。 從您想要的字型開始，最後使用一個通用字體系列（如果其他字型都不可用，則讓瀏覽器選擇該通用系列中類似的字型）。 字型名稱應以逗號分隔。 在 下一章 中閱讀更多關於備用字型的資訊。