Dreamweaver 帮助 | 向字体列表添加 Edge 和 Web 字体 (CC)

优质
小牛编辑
126浏览
2023-12-01

可向 Dreamweaver 中的字体列表添加 Adobe Edge 和 Web 字体。在字体列表中,首先列出 Dreamweaver 支持的字体堆栈,然后再列出 Web 字体和 Edge 字体。

向字体列表添加 Adobe Edge 字体

现在可在网页中使用 Adobe Edge 字体。在页面中使用 Edge 字体时,将添加额外的脚本标签以引用 JavaScript 文件。此文件将字体直接从 Creative Cloud 服务器下载到浏览器的缓存。

显示页面时,即从 Creative Cloud 服务器下载字体,即使用户计算机上有该字体也会下载。

例如,(在 12.2 中)仅使用字体“Abel”的脚本标签为如下格式:

<!--以下脚本标签从 Adobe Edge Web Fonts 服务器下载字体以在网页中使用。我们建议您不要修改它。-->

<script src="http://webfonts.creativecloud.com/abel:n4:default.js" type="text/javascript"></script>

“abel”是服务器用于识别该字体的内部名称。n4 表示所下载的字体的变种是“正常”样式,粗细为“400”。

在 Dreamweaver CC 中,添加的脚本如下所示:

<!--以下脚本标签从 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 字体。
  3. 要从此列表找到字体并将其添加到字体列表,请执行以下操作:

    • 单击要添加到字体列表的字体。
    • 要取消选择字体,请再次单击该字体。
    • 使用筛选器将首选字体列入候选。例如,要将衬线类型的字体列入候选,请单击
    • 可使用多个筛选器。例如,要将可用于段落的衬线类型的筛选器列入候选,请单击
    • 要按名称搜索字体,请在搜索框中输入其名称。
  4. 单击 筛选已选择的字体。
  5. 单击“完成”。
  6. 可从任意位置打开字体列表。例如,可使用“属性”面板的“CSS”部分中的“字体”列表。

    在“字体”列表中,先列出 Dreamweaver 字体堆栈,然后再列出 Web 字体。向下滚动列表以找到您所选择的字体。

专家演示:

专家演示: Train Simple

向字体列表添加 Web 字体

可将 Web 字体从计算机添加到 Dreamweaver 中的“字体”列表。Dreamweaver 的所有“字体”菜单中均会反映所添加的字体。支持 EOT、WOFF、TTF 和 SVG 类型的字体。

  1. 选择“修改”>“管理字体”。
  2. 在随后显示的对话框中,单击“本地 Web 字体”选项卡。
  3. 单击要添加的字体类型所对应的“浏览”按钮。例如,如果您的字体为 EOT 格式,则单击“EOT 字体”所对应的“浏览”按钮。
  4. 导航到计算机上包含该字体的位置。选择该文件并将其打开。如果该位置存在该字体的其它格式,则自动将这些格式添加到对话框。还自动根据字体的名称选取“字体名称”。
  5. 选择要求您确认已许可该字体供网站使用的选项。
  6. 单击“完成”。随后在“本地字体的当前列表”中显示字体的列表。

    注意:要从字体列表中删除 Web 字体,请在“本地字体的当前列表”中选择该字体,然后单击“删除”。

创建自定义字体堆栈

字体堆栈是 CSS font-family 声明中的字体列表。可使用“管理字体”对话框的“自定义字体堆栈”选项卡执行以下操作:

  • 使用“+”按钮添加新字体堆栈。
  • 要编辑现有字体堆栈,请从字体列表中选择字体堆栈。使用“>>”和“<<”按钮更新“选择的字体”的列表。
  • 使用“-”按钮删除现有字体堆栈。
  • 使用方向按钮将堆栈重新排序。

预览插入的字体

无法在设计视图中预览 Edge 和 Web 字体。要预览这些字体,请切换到实时视图,或在浏览器中预览页面。

跨文件更新 Web 字体脚本标记

更新链接到多个 HTML 文件的 CSS 文件中的字体时,系统会提示您在相关 HTML 文件中更新脚本标记。单击“更新”时,所有受影响 HTML 文件中的脚本标记都会更新。

更新页面上的 Web 字体脚本标记

选择“命令” > “清除 Web 字体脚本标记(当前页面)”以便更新网页上未在脚本标记中反映的任何 Web 字体。