了解如何在 Dreamweaver 中使用免費的網頁安全 Edge Web Fonts。Edge Web Fonts 是 Adobe 的 Typekit 和 Google Fonts 的字體集合。

您可以將 Adobe Edge Web Fonts 新增到 Dreamweaver 的字體清單中。在「字體清單」裡,Dreamweaver 所支援的字體堆疊會先列在網頁字體與 Edge Web Fonts 的前頭。

將 Adobe Edge Web Fonts 新增到字體清單

您可以在網頁中使用 Adobe Edge Web Fonts。當您在網頁中使用 Edge 字體時,系統會新增額外的 Script 標籤以便參考 JavaScript 檔案。此檔案會將來自 Creative Cloud 伺服器的字體直接下載到瀏覽器的快取中。

網頁顯示時,系統會從 Creative Cloud 伺服器中下載這些字體,即便使用者電腦上已有該字體也一樣。

例如,僅使用「Abel」字體的 Script 標籤會帶有下列格式:

<!--下列 Script 標籤會從 Adobe Edge Web Fonts 伺服器下載字體以便應用在網頁中。建議您不要擅自修改。-->

<script>var adobewebfontsappname ="dreamweaver"</script>

<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>

  1. 選取「修改 > 管理字體」。

  2. 「Adobe Edge 字體」標籤會顯示您可以新增至字體清單的所有 Adobe Edge Web Fonts。

  3. 若要在此清單中尋找字體,並將找到的字體新增到「字體清單」中,請執行下列動作:

    • 按一下您要新增至字體清單中的字體。
    • 若要取消選取字體,再按一下該字體。
    • 使用篩選器精選出偏好的字體。例如,若要精選出 Serif 類型的字體,請按一下
    • 您可以使用多重篩選器。例如,若要精選出可用於段落的 Serif 類型的字體,請按一下
    • 若要依名稱搜尋字體,請在搜尋方塊中輸入其名稱。
  4. 按一下 ,篩選您已選取的字體。

  5. 按一下「完成」。

  6. 從任何位置開啟「字體清單」。例如,您可以使用「屬性」面板中「CSS」區塊的「字體」清單。

    在「字體」清單中,Dreamweaver 字體堆疊會列在網頁字體前面。向下捲動該清單,找出選取的字體。

將本機網頁字體新增到字體清單

您可以將電腦中的網頁字體新增至 Dreamweaver 中的「字體」清單。新增的字體會反映在 Dreamweaver 的所有「字體」選單中。系統支援 EOT、WOFF、TTF 與 SVG 字型的字體。

  1. 選取「修改 > 管理字體」。

  2. 在顯示的對話方塊中,按一下「本機網頁字體」標籤。

  3. 針對您想要新增的字體類型,按一下對應的「瀏覽」按鈕。例如,若您的字體格式為 EOT,則按一下對應至 EOT 字體的「瀏覽」按鈕。

  4. 瀏覽至電腦上包含該字體的位置。選取檔案並開啟。如果該位置存在此字體的其他格式,則這些格式會自動新增到對話方塊中。「字體名稱」也會自動從字體名稱中挑選出來。

  5. 出現要求您確認授權該字體以供網站使用的選項時,請加以選取。

  6. 按一下「完成」。字體清單會顯示在「本機字體的現有清單」。

    註解:

    若要從字體清單中移除網頁字體,請在「現有的本機字體清單」中選取字體,然後按一下「移除」。

建立自訂字體堆疊

字體堆疊是 CSS 字體系列宣告中的一份字體清單。透過「管理字體」對話方塊裡的「自訂字體堆疊」標籤,您可以執行下列作業:

  • 使用「+」按鈕新增字體堆疊。
  • 若要編輯現有的字體堆疊,從「字體清單」中選取字體堆疊。使用「>>」與「<<」按鈕來更新「已選取的字體」清單。
  • 使用「-」按鈕刪除現有的字體堆疊。
  • 使用箭頭按鈕重新排列堆疊順序。

預覽插入的字體

您無法在「設計」檢視中預覽 Edge 字體與網頁字體。切換至「即時」檢視或在瀏覽器中預覽頁面,以便預覽這些字體。

更新多個檔案的網頁字體 Script 標籤

當您在連結到多個 HTML 檔案的 CSS 檔案中更新字體時,系統會提示您更新相關 HTML 檔案中的 Script 標籤。當您按一下「更新」時,所有受影響的 HTML 檔案中的 Script 標籤都會更新。

更新頁面上的網頁字體 Script 標籤

選取「命令 > 清理目前頁面的網頁字體 Script 標籤」,以更新網頁上未反映在 Script 標籤中的網頁字體。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策