视频: 1.1 Dreamweaver CC 基本工作界面 2024
Google提供了使用Dreamweaver向您的网站添加自定义字体的最简单方法之一。 Google Web Fonts提供了有限的字体集合,但您可以免费使用所有字体。请按照以下步骤将Google Web Fonts网站中的任何字体添加到您的网页中:
-
打开Web浏览器并访问 Google的Web字体网站 。
-
通过选择要查找的字体的类型和样式来搜索网站上可用的字体。
<! --1 - >要缩小搜索范围,请使用过滤器(在左侧栏中)。您可以通过编辑屏幕顶部的预览文本字段来更改每种字体中显示的文本。
-
找到您喜欢的字体,然后点击右下角的蓝色“添加到收藏”按钮,在每个字体名称下方。
-
点击您要在网页上使用的每种字体样式旁边的复选框。
Google字体目录中的大多数字体只有一种样式。尽管您可能会尝试选择所有样式,但最好仅选择要使用的样式。正如谷歌所警告的,您选择的字体样式越多,下载网页的时间就越长。
-
向下滚动页面并选择拉丁选项(对于英语)。
如果您需要其他语言的附加字符,请改为选择拉丁扩展选项。
-
向下滚动页面到三个选项卡的蓝色框;点击第一个标签将字体链接到您的网站。 Google提供了三个选项:标准,@import和JavaScript。您可以在Google网站上找到所有三个详细的说明。
7。从Google的“标准”标签字段中复制链接,就像从网页上复制任何其他文字或代码一样。
-
在Dreamweaver中,将链接粘贴到打开和关闭标签之间的网页头部区域。
-
返回Google网页字体网站,并在页面底部复制字体系列的名称。
-
您可以在将字体集成到您的CSS区域中找到字体系列的名称。
在你的样式定义中,你必须准确地包含字体的名字,正如Google写的那样。复制和粘贴是确保字体名称匹配的最佳方法。
在Dreamweaver中,将字体系列的名称粘贴到要使用该字体的CSS规则中。
-
将规则应用于网页中的文字。
-
如果您在标签选择器样式(例如
标签)中使用字体,则将标签应用于文本时,该字体将作为规则的一部分自动应用。如果您使用的是字体或ID风格,则样式必须应用于围绕文本的标签,如
标签或标签。
将页面发布到Web服务器,然后在Web浏览器中预览页面以查看字体。
-
请注意,即使使用“实时”视图选项,当您使用Google Web字体时,也可能看不到Dreamweaver中显示的字体。要确保字体在您的页面上正常工作,您可能需要使用FTP将该页面传输到Web服务器,并在网上发布后预览该页面。