借助 CodePen 使用網頁字體

CodePen 是網頁型 HTML、CSS 和 JavaScript 程式碼編輯器,可讓您直接在瀏覽器中實驗程式碼。您可以直接在 Pen 中使用自訂網頁字體

選擇要使用的字體

請依照網頁字體教學課程選擇一些字體,並建立您的網頁專案。

將內嵌程式碼新增到 Pen

可以在 HTML 編輯器設定選單「CSS > 新增外部 CSS」選單的「<head> 的內容」欄位中,將內嵌程式碼新增到 CodePen UI。

若要尋找專案的內嵌程式碼,請造訪「網頁專案」頁面並找出專案名稱。複製該專案的預設 CSS 內嵌程式碼,並將其貼到這些位置的其中一個。

搭配預設 CSS 內嵌程式碼使用 CodePen

直接連結 CSS 檔案來使用 CodePen

在 CSS 中套用字體

現在您可以在 Pen 的 CSS 編輯器中使用 font-family 名稱,而且可以在「即時檢視」中立刻看到這些字體。

已套用網頁字體的 CodePen 編輯器

要在 CSS 中使用的 font-family 名稱也會列在網頁專案中;請進一步了解如何在 CSS 中使用字體

網頁專案頁面中的 CSS 資訊

分叉 Pen

可以將 Public Pen 分叉,好讓其他用戶繼續建置您的程式碼。網頁字體也可以在分叉的 Pen 中使用。

刪除專案或取消訂閱

如果您刪除您正在 CodePen 上使用的專案或取消您的訂閱,則將無法再提供字體給使用該內嵌程式碼的任何 Pen 使用。這包括您的原始 Pen 以及從中分叉的任何 Pen。將套用 CSS 中指定的備用字體來取代自訂網頁字體。

Adobe 標誌

登入您的帳戶