发布时间:2021/01/19
本章节作为Hype 4交互动效制作软件排印面板的最后一个章节,将讲述文本间距内容,尤其是行高度,小编将深入探讨单行文字实现上下左右居中的原理。
在Hype中文本间距有三个属性:字母间距、字间距和行高度。
对英文来说,是调整每个字母之间的距离;对中文来说,是调整每个字之间的距离。
字间距只对英文有效,中文是没有字间距的。它代表的是每个英文单词之间的距离。特别注意的是:如果中文使用了英文的标点符号,调整字间距,对文字排版是有影响的。
对段落文本而言,就是每一行文字的高度。在应用上分两种情况:单行文字和多行文字段落。
单行文字的行高度就是该文本元素的高度(没有边框和上下补白的文本元素)。增加行高度,文本元素的高度也同时增加。
根据上述行高度的形成以及文本元素高度的组成,这里提供了单行文字上下居中的解决方案:在文本元素高度大于文字大小的情况下,只要:行高度 = 元素高度 – 上下边补白 - 边框宽度 * 2,该行文字必然上下居中。
多行文字的行高度是对整个文本元素而言的,不能单独设置该文本元素某一行的行高度。行高度改变了,每行文字的距离也改变了,但文本元素的高度没有改变。
当文本元素的高度大于多行文字内容的高度时,那么如何使文字内容在文本元素内上下居中呢?
首先是文本元素的上下补白设置为0,计算文字内容的行数乘以行高度,作为文本元素的高度。然后增加文本元素上下的补白值(两个值要相等),直至文本元素的高度符合要求的高度。这样文字内容在文本元素内上下居中。想要尝试的小伙伴们可以点击Hype下载。
截止到本章,排印面板的内容就全部讲完了。排印面板的内容相对比较简单,但有一些技巧是必须掌握的,如:添加字体、拷贝粘贴网上文字以及单行文字上下左右居中等。
下一章节开始,将讲述身份面板内容,其中会讲到一些HTML5语言,敬请期待。
作者:东佛