使用手冊 取消

在 Dreamweaver 中新增和修改字體組合

搜尋
Dreamweaver

Dreamweaver

開啟應用程式
  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 Dreamweaver 網站
  19. 疑難排解
    1. 已修正的問題
    2. 已知問題

 

 

在 Dreamweaver 中使用「管理字體」對話方塊，新增和修改字體組合

註解：

自 2022 年 7 月 1 日起，Adobe Edge Web Fonts 將在 Dreamweaver 21.2 及更早版本中停止使用。如果您在網站上使用 Edge Web Fonts，可以將其改為使用 Adobe 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. 選取「工具 > 管理字體」。

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

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

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

  3. 按一下 ，篩選您已選取的字體。

  4. 按一下「完成」。

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

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

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

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

  1. 選取「工具 > 管理字體」。

  2. 在「管理字體」對話方塊中，選取「本機網頁字體」。

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

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

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

  6. 按一下「完成」。

    字體清單會顯示在「目前本機的網頁字體清單」中。

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

建立自訂字體堆疊

字體堆疊是 CSS 字體系列宣告中的一份字體清單。

  1. 選取「工具 > 管理字體」，然後選取「自訂字體堆疊」。

    修改字體組合
    修改字體組合

  2. 從對話方塊頂端的清單中，選取字體組合。

    所選取組合中的字體就會列在對話方塊左側的「已選取的字體」清單中。右邊則是系統上已安裝的所有可用字體清單。

  3. 請執行下列其中一項作業：

    • 若要從字體組合新增或移除字體，請按一下「已選取的字體」清單和「可用的字體」清單之間的箭頭按鈕 (<< 或 >>)。

    • 若要新增或移除字體組合，請按一下對話方塊頂端的加號 (+) 和減號 (-) 按鈕。

    • 若要新增系統上未安裝的字體，請在「可用的字體」清單下方的文字欄位中鍵入字體名稱，並且按一下「<<」按鈕將它新增到組合中。當您在 Macintosh 上開發網頁而要指定 Windows 專用字體時，新增系統上未安裝的字體就很有用處。

    • 若要將清單中的字體組合上移或下移，請按一下對話方塊頂端的箭頭按鈕。

將新的組合新增到字體清單

  1. 選取「工具 > 管理字體」。

  2. 從「可用的字體」清單選取字體，然後按一下「<<」按鈕將字體移到「已選取的字體」清單。
  3. 對組合中接下來的每一種字體重複步驟 2。

    若要新增系統上未安裝的字體，請在「可用的字體」清單下方的文字欄位中輸入字體名稱，按一下「<<」按鈕將字體新增到組合中。當您在 Macintosh 上開發網頁而要指定 Windows 專用字體時，新增系統上未安裝的字體就很有用處。

  4. 完成選取特定字體後，請從「可用的字體」選單選取一般字體系列，並且按一下「<<」按鈕將這些一般字體系列移到「已選取的字體」清單。

    一般字體系列包括 Cursive、Fantasy、Monospace、Sans-serif 和 Serif。如果使用者系統上完全沒有「已選取的字體」清單中的字體，文字就會使用與一般字體系列相關的預設字體來顯示。例如，在大多數系統上的預設 Monospace 字體是 Courier。

預覽插入的字體

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

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

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

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

選取「工具 > 清理目前頁面的網頁字體 Script 標籤」，以更新網頁上未反映在 Script 標籤中的任何網頁字體。

更快、更輕鬆地獲得協助

新的使用者？

快速連結

檢視您的所有計劃 管理您的計劃
檢視快速連結
隱藏快速連結

法律注意事項    |    線上隱私政策