网站页面布局中网站设计字体的完整设计攻略

时间：2023-09-30 08:24:02 | 来源：网站运营

时间：2023-09-30 08:24:02 来源：网站运营

网站页面布局中网站设计字体的完整设计攻略：我们每天都设计处理字体。但我们并没有真正关心他们的存在。我们没有很好地使用它们甚至滥用它们。这都是因为我们不了解它们。字体是排版的重要元素之一;设计中最神秘的一个。在本文中，让我们与大家讨论这个深奥的研究。杭州网站设计——浪马峰科技

字体类型

英文字体（Typeface），分为几个类别，这是使用英文字体时必须知道的基本知识：

一、衬线体（衬线）

衬线是笔划边缘的装饰部分。下图中以红色标记的地方是衬线。

衬线设计的初衷是清楚地标记笔划的结束，提高识别率，并提高阅读速度。此外，使用衬线字体使人感觉更正统。因此，我们的许多常见英语书籍，特别是散文和小说，都使用衬线来完成文本。

网页设计中常用的衬线是Times New Roman和Georgia。左边是12px Times New Roman字体，右边是12px Georgia。

在中文中，我们使用的Song body是相应的serif字体。

二、非衬线体/无衬线体(Sans-serif)

如果字体没有serif，则称为非serif或serif。下图是防滑体。

在网页设计中通常使用相对多的防滑体。有Arial，Verdana，Tahoma，Helivetica，Calibri等。下图从左到右依次为Arial，Verdana，Tahoma：

值得注意的是，尽管serif字体在书籍中被广泛使用，但在Internet上很少使用serif字体。由于计算机屏幕的分辨率与书本不相当，因此在计算机屏幕上难以识别主体10~12px的衬线字体。下图是10px Verdana和10px Times New Roman的比较，没有Cleartype。您可以看到左侧的Verdana可以被很好地识别。右边的Times New Roman很难识别。

三、等宽字体(Monospace)

等宽字体实际上仅适用于西方字体。因为英文字母的宽度不同。例如，我比m窄得多。编程期间显示代码，如果字母宽度不同，则难以阅读布局。我们可以看到您在DOS命令行上使用等宽字体。

编程所需的等宽字体具有以下要求：

1，所有字符宽度相同;

2.简洁，清晰，标准化的人物形象;

3.支持ASCII码大于128的扩展字符集;

4.空白字符（ASCII：0×20）与其他字符的宽度相同;

5.“1”，“l”和“i”三个字符易于区分;

6.“0”，“o”和“O”三个字符易于区分;

7.双引号和单引号的前后部分易于区分，最好是镜像和对称的;

8.标点形状清晰，特别是大括号，圆括号和方括号。

常见的等宽字体是Courier，Courier New

四、手写体(Calligraphy)

顾名思义，手写是一种手写样式字体。有时我们称之为书法字体。中国书法字体大多是钝的。就个人而言，建议使用日本书法字体。日本书法和字体更具女人味，更人性化。然而，使用日本书法和字体的缺点是它们大多是传统的，而且许多其他汉字将会丢失。

五、符号体(Symbol)

Windows中最着名的符号是Webdings（记得我在Windows 95中使用它时）。以下是一些Webdings字体：字体的样式

常见的字体样式分为：Normal Normal，Bold Bold，Italic Italic。

简单来说，粗体是字体更暗，更“厚”。斜体是略微倾斜字轴。它们都用于强调空间中的某段文字。

说到粗体，我们可以很容易地想到CSS中的font-weight属性。我们知道font-weight属性值是普通，粗体和其他更大胆，更轻和100~900的功能的补充。那100-900的价值是多少？事实上，没有100到900之间的单位。好的字体会给不同的单词提供不同的设计。如果字体是预先构建的，具有不同的厚度级别，那么这些值将对应于每个级别。例如，Zurich字体包括Zurich Light，Zurich Regular，Zurich Medium，Zurich Bold，Zurich Black和Zurich UltraBlack六种字体。通过这种方式，苏黎世之光对应于100,200和300的三个值。苏黎世规则对应400，即“正常正常”，苏黎世中等对应500，苏黎世Bold对应于粗体大胆“，对应600,700，苏黎世黑色对应800，最后，苏黎世UltraBlack对应900。

对于中文斜体，通常不在网络上使用。由于中国笔画数量众多，使用斜体字将难以阅读。

单位

我们的网页设计中使用了一些单位：

1，点（pt，point）

72分= 1英寸，1英寸是72分。另外，1 pica = 12分

2，像素（像素，px）

像素是计算机屏幕上的最小图像单元，用外行的术语来说，它是屏幕上的最小点。

3，DPI，PPI

DPI的全称是Dots Per Inch，每英寸。 PPI的全称是Pixel Per Inch。它们是分辨率的单位。换句话说，可以在1英寸的长度中布置多少个点（像素）。例如，一般来说，我们的显示器大约为72ppi，长度为72英寸（像素），长度为1英寸。 dpi / ppi越高，分辨率越高，即颗粒越小，图像越精细。一般来说，照片的分辨率在240dpi到300dpi之间，所以为什么照片看起来比它在屏幕上看起来要详细得多。杂志以133或150 dpi的速度打印，高质量的书籍可以350-400 dpi的速度打印，因为大多数精美的印刷书籍都是以175到200 dpi的速度打印。那么为什么书中文本的相同物理尺寸比屏幕上的更清晰。也就是说，我们前面提到过，英文书籍印刷，为什么你可以大胆地使用Sans-serif字体。

dpi和ppi之间基本没有区别。找到差异真的很难，唯一的区别是dpi通常用于描述扫描仪和打印机，而ppi通常用于描述屏幕的分辨率。

4，ex，x-height

常用于CSS。 1ex =小写字母x的高度。

5，em

常用于CSS。当然，em不是小写字母m的高度（事实上，小写字母m通常与小写字母x相同）。 1em =字体大小的100％。是一个多单元。

间距

1，行距（行高，行距）

当涉及行间距（行间距，行高，行距）时，我们必须首先学习一个称为基线的术语。请记住，我们在第一次学习英语时曾经写过信件。那本行书？最粗的水平线是我们谈论的基线。基线是大多数字母“坐”的字体下降部分上方的线。大多数字体，大写字母总是接近基线并高于基线。中文字体与英文大写字母相同。下图中的红线是基线。

然后，行间距是指两条相邻线和基线之间的距离。行间距的单位通常使用em，即根据字体大小定义行间距。在浏览器中，默认行间距没有指南。来自W3C的更多建议，它认为默认行间距应该在1.0em和1.2em之间。实际上，在设置行间距时，排版有一个原则，即行之间的间隙必须大于单词和单词之间的间隙。否则，读者在阅读时很容易“序列化”。造成阅读困难。宽大的行间距可以分隔每行文本，使眼睛很容易区分前一行或下一行。近年来，网上文字的布局大多喜欢1.5em的行间距，特别是中文网站。也就是说，如果您使用12px字体大小，设计师通常喜欢18px行间距。 1.5em真的很棒。事实上，中文论文的规格也使用1.5em的行间距。

2，字间距（字母间距，跟踪）

字间距是一组字母之间的距离。字间距会影响行或段落中文本的密度。

3，字距调整（Kerning）

Kerning是一个针对视觉需求而完成的技术流程。简单地说，当两个特定字符排成一行时，您可以为它们指定不同的字间距。例如，当大写字母A后面跟着小写字母v时，两个字符之间的视觉上会有更大的间距（实际上字间距是相同的），这不能用普通的字符间距来解决。如果缩小间距，其他字母会挂在一起。此时，需要进行字距调整才能处理它。下图是应用字距调整的示例：

段落

1、行长(Measure)

行长度是文本段落的宽度。如下所示：

与总统有关的两个易读性问题：

线长越长，所需的线间距越大。行间距太小，阅读新行时读者很容易序列化。行间距太大，读者在读取行时会感觉文本不连续。

在文中，每行40到70个字母是合适的。

2、对齐(Alignment)

段落对齐基本上有四种类型：向左齐平，向右齐平，居中和对齐。

左对齐是一种对齐方法，用于设置文本内容，调整文本的水平间距，以及将段落或文章中的文本在水平方向上与左对齐。左对齐使文章左侧的文本具有整齐的边缘。与此同时，文本的右侧也不会整齐。所以左边的英文对齐也称为右边的粗糙，这意味着锯齿状的右边。右对齐也类似。

中心对齐是一种对齐方法，用于设置文本内容，调整文本的水平间距，以及将段落或文章中的文本水平对齐到中心。中心对齐将文章两侧的文字整齐地排列在中间，使整个段落或整个文章整齐。

对齐是指在两端设置文本内容并调整单词/单词的水平间距，使它们均匀分布在左右边距之间。对齐使文本的边缘具有整齐的边缘。

使用对齐后，两侧的对齐线将非常清晰，文本块的“快速”感觉将是显而易见的。但是，在英文排版中，当线条长度非常短时，使用对齐可能会导致某些线条的间距过长，而某些线条的间距过短，使得单词的间距不均匀感觉很乱。就像一件衣服到处打补丁。

3、易读性

可读性描述了印刷文本阅读的简易性和舒适性。事实上，通常设计的最根本目的也在这里。除了上述一些原则之外，我还收集了一些易读性的小原则并与您分享：

最多使用三种字体大小的设计。

设计最多使用三种字体。

要保证一定的对比度，但不能过度对比。杨文（黑底白字）比阴影（白底黑）更容易阅读。在#fff的背景下，使用＃333的文本看起来比＃000的文本更舒服。

注意文本的背景。背景应该是单一的。避免背景噪音。“少即是多”使用最少的元素来传达最多的信息。让你的链接看起来像是一个链接。

本文由杭州浪马峰科技整理编辑噢！