网页设计中的字体排版

时间：2023-10-04 09:06:01 | 来源：网站运营

时间：2023-10-04 09:06:01 来源：网站运营

网页设计中的字体排版：网页设计中我们更多的在谈论视觉效果和交互方式。但一个好用、常用的网站，在建立“第一次好印象”之后，最关键的“用户体验”应该是内容及获取的途径。内容在设计方向上自然是不在讨论范畴。就获取途径，良好的站点地图、合理的内容布局、规范的图文编排都是其中的重要基石。这其中，作为内容的载体——文字的编排，可以堪称为基石中的钢筋龙骨。
自从电脑技术进入千家万户之后，千字印刷所需要的专业技法和知识被简单的电脑自动排版所取代，字体编排成了一件不需要被熟知的技能。这也使得很多现代设计师不熟悉文字编排的通病。同时，伴随着技术的演进。设计师和程序员分工相对独立，在相互不了解工作机制的前提下就会产生设计稿无法被完全还原的情况。

本着“设计，不是为了设计稿而设计”的理念。作为设计师的我们应该注意以下这些我认为重要的字体编排知识。

善变的字体

不知道现在的你正在用着怎样的设备阅读这篇文章？可能是在公司的台式电脑上，或者坐在咖啡厅端着苹果MacBook笔记本，亦或者是在公交车上拿着Android手机在阅读呢？
如果你拿着这些设备做对比，会发现，每个设备上的页面都会有些许的不同，其中主要体现在文字上。每个设备（确切的说是每个操作系统）都会集成自己默认的字体，网页是调用系统中现有的字体。而由于版权的原因，你有的我不一定有，我有的你也不一定有。所以在不同系统中一张网页看起来会有所不同。

当你规定了某款字体的时候，需要它是足够“通用”的，但这很难。一般我们的解决方法是制定足够多的字体来给系统备选，这样你可以在不同系统间设定充足的备选方案。
另一方面，由于实现的技术不同，Windows和MAC OS系统对同一款字体的展示效果也会有很大差异。在Mac OS中字体看起来更加柔和平滑，而在Windows中则会变得像素化、锐利。

所以，尽可能多的在你需要展示的设备上去测试这些字体的呈现效果以达到你的预期。

统一调度字号

以前网页中都以12px的字体作为正文字号，不过在一个12*12的点集中能呈现出来的字型是非常有限的。你甚至已经无法区分衬线体和非衬线体之间的区别了。这也是当时技术下所需要的效果——在较小的屏幕中展示更多文字同时这些文字看起来都差不多。
而现在的字体，多以14px或16px作为正文字号。清晰、便于阅读且能更好的区分不同字体之间的差别。

相较于以前以px(像素点)作为文字尺寸单位，现代技术下更推荐em(相对比例)最为单位。浏览器默认状态下1em=16px,
换算一下12px=0.75em。利用em为单位的优势是可以修改默认值来实现全局字号统一调整。

行间距

行间距和字间距影响着阅读时的舒适度。间距过窄会容易造成阅读跳行，难以区分内容。过宽的间距则会使得内容显得松散而不成体系。
字间距由字体本身控制，所以如果你无法确定自己的修改是否是更合适的时候，保持默认字间距是明智的选择。

就中文而言，是有一个相对较为固定的行高：1.5～2em，即为字体高度的1.5～2倍之间。
一般而言我较为多用的值时1.75，相交1.5要来的宽松，相交1.7数值更为完整。

p {line-height: 1.75em;}

左右对齐

传统中文是方块文字，活字印刷保持着纵横对其的原则。但现代书写系统中避头尾点及中英文混排使得这一点已经很难实现了。
不过，即使无法做到纵横对其，保持首尾对齐也还是能让段落看起来美观很多。

p { text-align: justify;text-justify: ideographic;}对齐会强制拉宽字距，在一些情况下会使得文字显得不连贯。

p { word-break: break-all; }break-all会强制截断英文词语，同时无视避头尾点让文字连贯。不过由于其特性，需要谨慎使用。

不要使用斜体

中文中从来不存在斜体这种书写形式。而拉丁文中的「italic」主要是指「手写体」，所以对应的中文更恰当的是用书法体来替代。例如：楷书、行书等。
网页中<em>往往会被强制斜体，这其实并不符合我们的需求。比较合适的处理是加粗、改成黑体或者加下划线等。
去掉<em>标签的斜体属性

em { font-style: normal; }以上就是网页中的一些文字牌排版技巧，在设计时能时刻考虑到这些以保证你的设计稿能在代码还原时候的复现是十分必要的。也是作为基于屏幕工作的诸位所需要熟知的。