网页字体设计思路 第1篇
由于中文字体内都包含西文字体，如想优先显示效果较好的西文字体，需要将西文字体写在中文字体的前面。
虽然用户群体中使用 Windows 系统较多，但 Mac 用户大部分会下载 Office，所以会存在许多 Windows 下常见的字体，比如微软雅黑。将 macOS 系统的字体写在 Windows 的前面，可以保证在对应平台显示更好的效果。
先了解 serif（衬线体）与 sans-serif（无衬线体）
衬线体与无衬线体是两种最基础的字形分类，衬线体在笔画开始与末端的地方有像小三角的装饰。
衬线体更多使用在印刷品上，在纸张上有棱角的字体更容易被识别。而在屏幕显示中字体过多的装饰点缀容易造成视觉疲劳，所以在屏幕显示中更多使用无衬线体。
一些常见常用的字体：
网页字体设计思路 第2篇
将需要使用的字体文件下载后放在服务器上，用 @font-face 将字体文件作为一个资源应用到 CSS 文件。
为了兼容不同浏览器需要准备多种字体格式文件，字体格式文件与浏览器的兼容情况：
.ttf / .otf
.woff
IE9+,。
.eot
IE4+ 专用。
.svg
主要针对 Safari 做兼容。
网页字体设计思路 第3篇
1、行距(Line-height、Leading)
说到行距(行间距、Line-height、Leading)，我们必须先要学习一个术语叫做基线(baseline)。还记得我们刚学英语的时候写字母用 的那个线格簿子吗?那根最粗的横线就是我们说的基线。基线就是大部分字母所“坐”在的，字体的下降部之上的直线。大部分字体，大写字母总是紧贴基线，并在 基线之上。中文的字体和英文的大写字母情况一样。下图红色的线就是基线。
那么，行距就是指两个相邻的行之间，基线的距离。行间距的单位常常使用em，也就是根据字体大小来定义行距。在浏览器中，默认的行距并没有一个准则。更具 W3C提供的建议，它认为默认的行距应该在到之间。事实上，在设定行距的时候，排版上有个原则，就是行与行之间的空隙一定要大于单词与单词之间的空隙， 否则的话，阅读者在阅读的时候容易“串行”，造成阅读困难。充足的行距可以隔开每行文字，使得眼睛容易区分上一行或下一行。近几年Web上对于正文的排 版，大多喜欢的行距，尤其是中文网站。也就是如果使用了12px的字体大小，那么设计师常常喜欢18px的行距。确实是一个很好的经 验值。事实上，中文的论文的规范也是使用的行距。
2、字间距(Letter-spacing、Tracking)
字间距是指一组字母之间相互间隔的距离。字间距影响了一行或者一个段落的文字的密度。
3、字距调整(Kerning)
字距调整是一种因视觉需要而做的技术处理。简单说，在两个特定的字符连排的时候，你可以为它们单独指定与众不同的字间距。比如当一个大写A后面跟随一个小写 v的时候，两个字符间就会出现视觉上的更大的间距(实际上字间距是一样的)，这是普通的字符间距所无法解决的。如果减少它们的间距，那么其他的字母就会连 成一团。这时候就需要字距调整来处理了。下图就是一个应用了字距调整的例子：
段落
1、行长(Measure)
行长是指一段文字的宽度。如下图：
有两个易读性问题与行长有关：
行长越长，需要的越大的行距。行距太小，读者阅读换行时容易串行。行距太大，读者阅读行时会感觉到文字不连续。
正文中，每行40~70个字母为宜。
2、对齐(Alignment)
段落的对齐基本有四种：左对齐(flush left)、右对齐(flush right)、居中对齐(centered)和两端对齐(justified)。
左对齐是指设置文本内容，调整文字的水平间距，使段落或者文章中的文字沿水平方向向左对齐的一种对齐方式。左对齐使文章左侧文字具有整齐的边缘。同时文字的右边就会不整齐。所以英文对左对齐也叫做ragged right，意指外形参差不齐的右边。右对齐也类同。
居中对齐是指设置文本内容，调整文字的水平间距，使段落或者文章中的文字沿水平方向向中间集中对齐的一种对齐方式。居中对齐使文章两侧文字整齐地向中间集中，使整个段落或整篇文章都整齐的
两端对齐是指设置文本内容两端，调整文字/单词的水平间距，使其均匀分布在左右页边距之间。两端对齐使两侧文字具有整齐的边缘。
使用两端对齐之后，两侧的对齐线会很明晰，文本块的“快”的感觉也会很明显。但是，在英文排版中，当行长很短的时候，使用两端对齐可能会照成某些行词间距过长，某些行词间距过短，这样参差不齐的词间距会感觉十分凌乱，就像一件到处都是补丁的衣服。
3、易读性
易读性描述的是排印文本阅读时的轻松和舒适程度。实际上，平常的设计的最根本的目的也在于此。除上文中叙述的一些原则外，我另外收罗了一些小小的易读性原则，与大家分享：
一份设计上至多使用三种字体的大小。
一份设计上至多使用三种字体。
要保证一定的对比度，但又不可有过度的对比。阳文(白底黑字)比阴文(黑底白字)要更容易阅读。在#fff的背景上，使用#333的文字要比#000的文字看起来舒服。
要注意文字所在的背景。背景要单一。避免背景噪声。
“少即是多” 用最少的元素去传达最多的信息。
让你的链接看起来像是一个链接。
利用好你的空间。
转自：天极网
来自： 王云tncc0kikyz > 《文件夹1》
0条评论
发表
请遵守用户 评论公约
在word中，调整文本行间距应选取什么？
在word中，调整文本行间距应选取什么？什么是行间距和段间距？如下图，行间距是指本行字符的顶端举例下一行字符的顶端的距离。行间距与...
排版三要素：字号、行距和字间距
排版三要素：字号、行距和字间距。所以字间的调整也是依据原有字体设计中已有的间距上的改变，在此我们可以称之为字符间距。我们可以举...
如何用文字美化排版
一般包括标题文字和正文文字，且标题文字和段落文字之间需存在层次感，以突出标题。另外还有一种层次在影响着行或段落的视觉流，这是特...
小白必看—全面解析：字号、行距和字间距
小白必看—全面解析：字号、行距和字间距。有三个重要概念：字号、行距、字间距。字间距 VS 字符间距字间距是字符间距的参数值，字间距...
Word文档操作技巧集锦
Word文档操作技巧集锦。14、巧调Word字符间距Word中的汉字、英文字母、数字之间一般都存在一小段间隔，这个间隔有一个空格大小，看起来很不协调，如果我们不需要这段间隔，可以按_Ctrl+A_组...
字号尺寸大小对照表
即point,就是指英文中的_磅_,px即pixel,就是像素。点数制：又叫做磅数制（英文point的英译，缩写为P或PT），既不是公制，也不是英制，是印刷中专用的尺度，是欧美各国用来计算...
Word教程：聊聊Word字符间距、行距、段落间距的那点