Hype

Hype中文官网 > 新手入门 > 基础教程:Hype 4排印面板之文本间距

基础教程:Hype 4排印面板之文本间距

发布时间:2021/01/19

本章节作为Hype 4交互动效制作软件排印面板的最后一个章节,将讲述文本间距内容,尤其是行高度,小编将深入探讨单行文字实现上下左右居中的原理。

Hype中文本间距有三个属性:字母间距、字间距和行高度。

  1. 一、字母间距

对英文来说,是调整每个字母之间的距离;对中文来说,是调整每个字之间的距离。

字母间距
图1:字母间距
  1. 二、字间距

字间距只对英文有效,中文是没有字间距的。它代表的是每个英文单词之间的距离。特别注意的是:如果中文使用了英文的标点符号,调整字间距,对文字排版是有影响的。

字间距
图2:字间距
  1. 三、行高度

对段落文本而言,就是每一行文字的高度。在应用上分两种情况:单行文字和多行文字段落。

  1. 1、单行文字的行高度

单行文字的行高度就是该文本元素的高度(没有边框和上下补白的文本元素)。增加行高度,文本元素的高度也同时增加。

  1. 图3显示了行高度的形成过程:设定字体大小为36px,文本元素边框宽度为0,补白为0,行高度也是36px。当行高度增加1px变为37px,元素上边向上移动了1px。行高度再增加1px变为38px,元素下边向下移动了1px。以此类推,不管行高度如何变化,该行文字保持上下居中。
行高度的形成过程
图3:行高度的形成过程
  1. 大多数情况,行高度是不等于元素高度的。元素高度的组成是:行高度 + 上边补白 + 下边补白 + 边框宽度 * 2。
    1. 2、多行文字的行高度

根据上述行高度的形成以及文本元素高度的组成,这里提供了单行文字上下居中的解决方案:在文本元素高度大于文字大小的情况下,只要:行高度 = 元素高度 – 上下边补白 - 边框宽度 * 2,该行文字必然上下居中。

单行文字上下居中
图4:单行文字上下居中

多行文字的行高度是对整个文本元素而言的,不能单独设置该文本元素某一行的行高度。行高度改变了,每行文字的距离也改变了,但文本元素的高度没有改变。

元素高度不因行高度的改变而改变
图5:元素高度不因行高度的改变而改变

当文本元素的高度大于多行文字内容的高度时,那么如何使文字内容在文本元素内上下居中呢?

首先是文本元素的上下补白设置为0,计算文字内容的行数乘以行高度,作为文本元素的高度。然后增加文本元素上下的补白值(两个值要相等),直至文本元素的高度符合要求的高度。这样文字内容在文本元素内上下居中。想要尝试的小伙伴们可以点击Hype下载

多行文字内容在元素内上下居中
图6:多行文字内容在元素内上下居中
  1. 四、总结

截止到本章,排印面板的内容就全部讲完了。排印面板的内容相对比较简单,但有一些技巧是必须掌握的,如:添加字体、拷贝粘贴网上文字以及单行文字上下左右居中等。

下一章节开始,将讲述身份面板内容,其中会讲到一些HTML5语言,敬请期待。

作者:东佛

标签:字母间距字间距行高度

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21
基础教程:Hype 4入门基础
Hype是一款在MacOS系统下无代码的交互动效制作软件,是一个创作网页的技术平台。通过这个技术平台创作出来的内容,在后台会自动生成代码,可以直接在网上通过浏览器、移动设备等浏览使用。
2020-07-20
Hype 如何进行安装与激活
本篇将为各位小伙伴们集中介绍一下H5制作软件Hype的安装与激活教程。
2020-12-24