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

来源:珠海建站公司 2020-11-04 14:00:00

我们每天设计字体。但我们并不在乎他们的存在。我们没有很好地使用它们,甚至滥用它们。都是因为我们不了解他们。字体是排字重要的元素之一,是设计中神秘的元素之一。在这篇文章中,让我们来讨论一下这项深入的研究。

英文字体分为几类。这是你在使用英文字体时必须知道的基本知识

1、 衬体

衬线是笔触边缘的装饰部分。下图中用红色标记的区域是衬线。

serif设计的初衷是清晰地标明笔画的结尾,提高识别率,提高阅读速度。此外,衬线字体的使用让人感觉更加正统。因此,我们的许多普通英语书籍,特别是散文和小说,都使用衬线来完成课文。

网页设计中常用的衬线是times New Roman和Georgia。左边是12px的新罗马,右边是12pxgeorgia。

在中文中,宋体是对应的衬线字体。

2、 无衬线

如果字体没有衬线,则称为非衬线或衬线。下图为防滑体。

在网页设计中通常会用到更多的防滑体。有Arial、Verdana、Tahoma、Helvetica、Calibri等,从左到右依次为Arial、Verdana和Tahoma

值得注意的是,尽管serif字体在书籍中被广泛使用,但在互联网上却很少使用。由于计算机屏幕的分辨率与书籍的分辨率不一样,在计算机屏幕上很难识别出主体为10~12px的衬线字体。这里是10pxverdana和10px Times New Roman的比较,没有ClearType。你可以看到左边的Verdana是公认的。右边的《泰晤士报》“新罗马”很难辨认。

3、 等宽字体

等轴测字体实际上只适用于西方字体。因为英文字母的宽度不同。例如,我比m要窄得多。代码是在编程过程中显示的,如果字母宽度不同,则很难读取布局。我们可以看到您在DOS命令行中使用相同宽度的字体。

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

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

2空白字符宽度(ASCII:0×20)与其他字符宽度相同;

31、“L”和“I”易于区分;

4.““0”、“O”和“O”易于区分;

5双引号和单引号的前后部分易于区分,是镜像和对称;

6标点形状清晰,特别是花括号、圆括号和方括号。

等宽的常用字体是courier、couriernew

4、 书法家

顾名思义,手写体是一种手写体字体。有时我们称之为书法。中国书法大多是钝的。我个人推荐日本书法。日本的书法和字体更加女性化和人性化。然而,使用日文书法和字体的缺点是,它们大多是繁体字,许多其他汉字会丢失。

5、 符号

windows中***的符号是webdings(还记得我在windows95中使用它的时候)。以下是一些webdings字体:字体样式

常见的字体样式有:普通、粗体、斜体。

简而言之,粗体是一种较暗、较粗的字体。斜体是稍微倾斜的轴。它们都用来强调空格中的文本。

说到粗体,很容易想到CSS中的font-weight属性。我们知道,font-weight属性的值是对普通、粗体和其他粗体、浅色和100-900特性的补充。100-900值多少钱?事实上,100到900之间没有单位。好的字体为不同的单词提供不同的设计。如果字体是预先构建的并且具有不同的厚度级别,则这些值对应于每个级别。例如,苏黎世字体包括六种字体:zurichlight、zurichregular、Zurich medium、Zurich bold、Zurich black和Zurich ultrablack。这样,苏黎世的光对应三个值100、200和300。

对于斜体字,它通常不在互联网上使用。由于中国的笔画数量众多,使用斜体将很难阅读。

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

72点=1英寸,1英寸等于72点。此外,1 pica=12分

像素是计算机屏幕上小的图像单位。通俗地说,它是屏幕上小的点。

DPI的全名是dotsprinch,每英寸。PPI的全名是pixel perinch。它们是分辨率单位。换句话说,在1英寸的长度上可以放置多少个点(像素)。例如,一般来说,我们的显示器大约是72 PPI,72英寸(像素)长,1英寸长。DPI/PPI越高,分辨率越高。一般来说,照片的分辨率在240 DPI到300 DPI之间,那么为什么照片看起来比屏幕上显示的更详细呢。杂志以133或150 DPI的速度打印,而高质量的书籍可以以350-400 DPI的速度打印,因为大多数精细印刷的书籍都是以175-200 DPI的速度打印的。那么,为什么书中同样大小的文字比屏幕上的文字更清晰呢。换句话说,正如我们前面提到的,英文图书印刷,为什么可以大胆使用无衬线字体。

DPI和PPI没有区别。很难找到区别,***的区别是DPI通常用于描述扫描仪和打印机,而PPI通常用于描述屏幕的分辨率。

常用于CSS。1ex=小写X的高度。

常用于CSS。小写字母m通常与小写字母m不同。1em=字体大小。它是一个多单元。

说到行距(行距、行高、行距),我们必须首先学习一个叫做基线的术语。请记住我们***次学英语时写信。哪本跑步手册?粗的水平线就是我们所说的基线。基线是字体下降部分上方的一条线,大多数字母都在那里。在大多数字体中,大写字母总是接近或高于基线。中文字体与英文大写字母相同。下图中的红线是基线。

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

紧排是一种满足视觉需求的技术过程。简单地说,当两个特定字符在一行上时,可以为它们指定不同的字间距。例如,当大写字母A后跟小写字母V时,两个字符之间的视觉间隙会更大(事实上,单词间距是相同的),这是普通字符间距无法解决的。如果你缩小间距,其他字母就会挂在一起。此时,您需要调整字体间距来处理它。下图显示了应用紧排的示例:

行长度是文本段落的宽度。具体如下:

行长度越长,所需的行间距越大。行之间的间距太小,因此读取器在读取新行时很容易序列化。如果行与行之间的间距太大,读者在阅读这些行时会感到文本是不连续的。

段落对齐基本上有四种类型:左对齐、右对齐、居中对齐。

左对齐是一种对齐方法,用于设置文本内容、调整文本的水平间距以及将段落或文章中的文本水平向左对齐。左对齐使文章左侧的文本具有整齐的边缘。同时,右边的文字也不整齐。所以英国人在左边的排列也被称为右边的粗糙,意思是锯齿状的右边。右对齐方式类似。

居中对齐是一种对齐方法,用于设置文本内容、调整文本的水平间距以及将段落或文章中的文本水平对齐到中心。居中对齐将文章两边的文字排列在中间,这样整段或整篇文章都整洁。

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

有了对齐,两边的对齐线将非常清晰,文本块的“快速”感觉将非常明显。然而,在英文排版中,当行的长度很短时,使用对齐可能会导致某些行的间距过长,而有些行的间距太短,这就使得单词的间距不均匀,令人困惑。到处都是补丁。