基础教程：Hype 4排印面板之Web字体

时间：02-01来源：作者：点击数：

对于新手来说，在Web网页使用自定义字体一直是个难点。很多新手觉得下载了一个字体安装到系统中，就可以在设计的网页上使用这个字体了。其实，这是一个错误的想法。

Hype 4交互动效制作软件是一个图形界面，在其中添加字体或者给场景中的文本文字使用自定义字体变得简单直观。当然，页面设计中用到的那些添加字体的代码，在Hype 4 HTML5创作工具中还是要使用的。

一、Web字体

在讲述添加字体之前，有必要给小伙伴讲述什么是Web字体，以及Web字体与本地字体的区别。在前面的学习中，小伙伴也学习知道，在Hype 4软件中是有Web字体库的。

1、什么是Web字体

Web字体就是字体文件保存在网络上或者云端的字体，可以通过链接进行调用。在设计网页时，如果需要用到这个Web字体，就把这个Web字体文件的网络链接编写到网页代码中。

当本地电脑的浏览器打开这个网页，要显示这个Web字体的效果时，就会通过链接获取这个Web字体文件，这样才能在浏览器显示这个字体的效果。如果因为网络原因使得字体文件找不到，浏览器就会用默认的字体替代这个Web字体，显示默认字体的效果。

2、Web字体与本地字体的区别

本地字体（系统自带的字体）是不能应用到网页中的，因为如果打开该网页的设备没有装载这个字体，网页就不会显示那个字体效果，意味着网页上使用这个字体毫无意义。

Web字体不一样，它可以在任意地方、任意设备打开该页面，只要有网络，都能显示该字体效果，而无需设备装载了该字体文件。

在图1中，小编对比了Mac OS的字体和Hype 4字体，即使是字体名称一样、字体效果也一样，但字体的来源是不一样的。Mac OS字体是系统自带的，Hype 4的字体是软件本身提供的。

图1：Mac OS与Hype 4字体的比较

二、添加字体

了解了什么是Web字体后，小伙伴就应该知道给Hype添加的只能是Web字体。Hype提供了两种添加字体的方法。这里需要提醒小伙伴，添加的字体只对当前项目有效，如果打开了另一个新的Hype文件，字体需要重新添加。

1、Google字体

在“添加更多字体”下拉菜单中，选择“Google字体”，进入如图4的弹窗界面。从列表中可以选择Google字体进行添加。由于众所周知的原因，弹窗界面的列表搜索不到Google字体，小编就不再多说Google字体的添加了。

图2：添加Google字体弹窗界面

2、自定CSS第三方字体

在“添加更多字体”下拉菜单中，选择“自定CSS”，进入如图3的弹窗界面。小伙伴可以依照界面的要求添加第三方字体。

显示名称：Hype字体列表中显示的字体名称。比如：黑体、楷体等。
CSS字体系列：在代码中，font-family后面的字体的英文名称。
嵌入式头HTML：具体的内容放到文稿面板中详细讲解。小伙伴只要知道：在这里需要粘贴一段由<style type="text/css">标签开始，</style>标签结束，中间是@fonts-face{代码段}的代码。这段代码其实就是云端字体文件的链接地址。这段代码无需专门去记，在你要使用的Web字体会提供。