WEB页面设计中文本排版的技巧和细节
关关 2018-09-06 来源 : 阅读 2826 评论 0

摘要:本篇教程探讨了WEB页面设计中文本排版的技巧和细节,希望阅读本篇文章以后大家有所收获,帮助大家对WEB页面设计的理解更加深入。

本篇教程探讨了WEB页面设计中文本排版的技巧和细节,希望阅读本篇文章以后大家有所收获,帮助大家对WEB页面设计的理解更加深入。


  网站的核心是内容,用户访问网站最重要的目的就是要看网站的正文,所以,网页的文本排版非常重要。

    网页的文本排版并不是仅仅在CSS里设置个字体大小那么简单的,想要有好的排版,对细节要下一番功夫才行。

 

字体大小与行距

    在早期的网页设计中,设计师为了追求中文字体的最佳视觉效果,经常使用12px像素的字号。其实在现在看来,网站内容页面用这么小的文字是不可取的,小字体的可读性很差,没有多少人愿意非常费力的盯着屏幕去辨识那些小字。应该说,将文字的字号设置成14px或者更大的16px会更加合理,浏览者阅读起来也更加轻松。当然,如果条件允许,可以在文章阅读页面增加选择字体大、中、小的连接。

    文本之间的行距是非常重要的,因为挤在一起的文章会让读者看起来非常累,时不时的还会看错行。在面对密密麻麻挤在一起的长篇文字时,很少有人有耐心会看下去(至少我是如此)。一般情况下,文本的行距为1.5em与1.7em之间比较好,最好不要高于2em,否则过犹不及。

    快速参考:

    CSS中使用font-size调整字体大小,例如:font-size:14px;

    CSS中使用line-height调整行距,例如:line-height:1.6em;

 段落间距
    
    在段落之间,要保持足够的间距才能让读者更容易识别,页面也更整洁。面对没有段落间距的页面,读者很可能会把几个连在一起的小段路看成一个大段落,如果每个段落内容太多,很少有读者有耐心读完,因为互联网上绝大多数的读者浏览网站的方法并不是精读,而是“扫描”。
    
    我们通过修改p标签的margin属性或者padding属性来修改段落间距。相比较而言,段落间距占据一行文字的距离还是比较合理的,所以我们通常设置段落间距为1em。我习惯使用“padding:0.5em 0 0.5em 0;”来设置段落间距,padding后设置的距离按照顺序分别是段落的上方、右方、下方、左方间距。之所以在上方和下方各用一个0.5em而不是在下方用1em,是因为分别为上方和下方设置段落间距会让段落在右边框或背景的时候看起来更加均匀。
    
    快速参考:p { padding:0.5em 0 0.5em 0; }

 

段落首行缩进
    
使用text-indent即可实现段落的首行缩进

快速参考:p { text-indent:2em; }

 

本文由职坐标整理并发布,了解更多内容,请关注职坐标设计创作网页设计频道!

本文由 @关关 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 2
看完这篇文章有何感觉?已经有3人表态,33%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程