Adobe Edge WebFonts 介绍

发布时间：2024-01-03 21:27:25 所属栏目：教程来源：DaWei

导读： 我们将对 Adobe Edge Web Font 进行一定的介绍和科普，了解它的过去和现在。本节作为一个 Dreamweaver 生态圈学习的了解模块，不需要大家掌握太多的知识点，而是了解这个软件的基本功能和作

我们将对 Adobe Edge Web Font 进行一定的介绍和科普，了解它的过去和现在。本节作为一个 Dreamweaver 生态圈学习的了解模块，不需要大家掌握太多的知识点，而是了解这个软件的基本功能和作用即可。接下来就让我们一起来了解这个 Adobe Edge Web Font 软件吧！

1.网页字体的历史与背景
自打我们开始学习网页设计，我们可以发现，我们大多数设置字体的方式是通过网页的现有的 font 标签的属性来设置。可能有的同学就会有疑问了，这些从一开始就可以轻松设置的字体来自于哪里？

在遵循 W3C 规范的标签使用过程中，字体的解析都是由浏览器参与完成的。你可以理解为浏览器这个独特的系统提前预设或者内置。

那么，既然是预设内置，就必然面临被人们看腻，千篇一律，可组合性太低等缺点。那么如果作为一个个人网页设计者，如何才能从浏览器预设内置的字体中跳出来，追求自己想要的字体，比如 Android 手机，或者 iPhone 手机中的各式各样的字体？首先是能不能的问题，在这里老师可以明确告诉大家，能！然后是如何去使用这些外来的字体呢？我们一般分成两种使用方式。

第一种：

在早期的一段时间内，有些网页设计者采用的就是这种方式，也就是用部分文字图片替代部分文字，以追求独立于浏览器内置预设字体之外字体的效果。这里说的部分文字图片是什么意思呢？就是图像工作者，先用制图软件制作出一些不同样式字体的文字，然后把它们作为类似活字印刷术的字块做成字库，这样就可以在用到哪个字的时候，就用我们制作好的这个字的图片去替换，从最终的显示效果和结果上看根本没有任何区别。

第二种：

第二种就是加载一些第三方的字体文件库，比如早期常见的有 Goole 公司提供的 Goole Web Fonts。到后来，有我们今天要说的 Adobe Edge Web Fonts，作为网页设计者和网页用户，这二者并不能看出太大的区别。而且我们今天讲到的 Adobe Edge Web Fonts 加载字体速度很快，使用起来十分流畅。加上它与 Adobe Creative 的深度融合，如果你是一个 Dreaweaver CC 的使用者，那么 Adobe Edge Web Fonts 绝对是你更换网页字体的不二选择！

2. 在 Dreamweaver CC 2018 中使用 Adobe Edge Web Font的使用方法
在上面的知识点中大家了解了网页中字体多样化的意义以及主流的第三方字体库。那么现在我们就来开始学习一下如何在Dreamweaver CC 2018 中使用并掌握 Adobe Edge Web Fonts 丰富自己网页中的字体。

当然，后者的使用方式适合一些设计团队成熟的团队或者工作室，在这里老师主要讲解 Adobe Edge Web Fonts。对自定义部分就不做深入讲解了。大家只需要知道它的操作入口在哪里就好。

既然我们都知道了如何管理字体，那么我新建这个空白的 HTML 页面有什么用呢？我如何设置字体呢。这就和大家之前给一个新建的 DIV 中的文字设置字体一样，在当前页面内选择在当前页面中新建源，然后给新建的 HTML 元素的 ID 或者 CLASS 赋值，有了 ID 或者 CLASS 后，大家就可以给他们关联 CSS 设计器，关联完设计器后就可以在属性面板选择相应的属性。

如下图所描述的那样，我们在属性面板此时找到字体设置的相关属性，比如 font ，就可以看到弹出了一个长长的列表（图片中红色框起来的部分）。最后，这个长长的列表最下面还有一个管理字体的入口。这就是方便你随时往这个列表里加或者减少字体。

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!