网页设计中局部字体 第1篇
OPPO Sans
会发现在 Rendered Fonts 中显示 TencentSans 和 OPPO Sans 为 Network resource，不同于知乎和爱奇艺渲染出的字体为 Local file。
因为特定字体除非用户主动下载安装，并不能确保存在于所有用户的电脑内，仅仅用 font-family 引用，未安装字体的电脑都无法渲染出来。
网页设计中局部字体 第2篇
常见的字体的样式分为：正常Normal、粗体Bold、斜体Italic。
简单来说，粗体就是字体会更加黑，更加“粗”。斜体就是将字轴微微倾斜。他们都是用于在篇幅内强调某段文字上。
在说到粗体的时候，我们很容易联想到CSS里的font-weight(字重)属性。我们知道font-weight(字重)属性值除了我们平常使用的 normal，bold外，还有bolder,lighter,100~900等属性。那么这个100～900的值是什么呢?事实上，100～900并没 有单位。优秀的字体会对不同的字重提供不同的设计。如果字体事先内置了不同等级的粗细程度的设计，那么这几个数值将分别对应每个等级。例如Zurich字 体，就包含了Zurich Light、Zurich Regular、Zurich Medium、Zurich Bold、Zurich Black、Zurich UltraBlack六个字体。这样一来，Zurich Light对应的就是100、200、300三个数值，Zurich Regular对应的就是400也就是“正常 normal”，Zurich Medium对应的是500，Zurich Bold也就是“粗体 bold”对应的是600、700，Zurich Black对应800，最后，Zurich UltraBlack对应的是900。
对于中文斜体，一般在网络上是不使用的。因为中文笔画繁多，使用了斜体将难以辨认。
网页设计中局部字体 第3篇
华文细黑是Mac下的默认中文，这套字体跟前面的微软雅黑相比较，更显绢细、秀气。笔划细节比微软雅黑处理的多一些，所以整体给人比较精致的感觉。注意一下，华文细黑并不是所有电脑的自带字体，当网站文字用到这个字体的时候，是需要在自己电脑上下载这套字体的。除此，在写css代码的时候，font-family应该设置的选择性多一下，以保证界面打开的最佳效果。
这个字体就不给大家做展示效果了，因为这个不是系统的默认字体，电脑上没有安装这个字体的也看不到网页的原始效果。
网页设计中局部字体 第4篇
前面介绍的三款字体都是非称线字，接着要介绍的是称线字体——中易宋体，简称宋体。宋体在我们的日常中使用范围也很广，这是电脑自带的其中一种字体。宋体是为适应印刷术而出现的一种汉字字体。笔划有粗细变化，常用于书籍、杂志、报纸印刷的正文排版，所以在大篇幅文章的设计时，可以采用宋体。这个字体是Windows系统下最常见的字体，小字体点阵，大字体TrueType。大标题显示时字体不是很好看，所以一般不建议用宋体来当标题。
上海汉路律师事务所的网站就是采用了宋体字，这种字体的选择一般出现在一些个性比较强的网站中，传统、专业、公正、官方、权威，宋体就表现了这种特点。
网页设计中局部字体 第5篇
将需要使用的字体文件下载后放在服务器上，用 @font-face 将字体文件作为一个资源应用到 CSS 文件。
为了兼容不同浏览器需要准备多种字体格式文件，字体格式文件与浏览器的兼容情况：
.ttf / .otf
.woff
IE9+,。
.eot
IE4+ 专用。
.svg
主要针对 Safari 做兼容。
网页设计中局部字体 第6篇
说到Helvetica这套字体，应该是设计师们的最爱了吧。这套字体属于 Realist风格，拥有简洁现代的线条，受到大部分设计师的追捧。这种字体给人一种简单、现代化、休闲轻松的感觉。适用于扁平化设计，也适合搭配任何设计项目，包括banner、平面设计以及网页字体等。在Mac下面被认为是最佳的网页字体，但在Windows下由于Hinting的原因显示很糟糕。
这个字体主要体现在苹果官网上，可以看下美国的官网。
网页设计中局部字体 第7篇
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字符间距、行距、段落间距的那点
网页设计中局部字体 第8篇
由于中文字体内都包含西文字体，如想优先显示效果较好的西文字体，需要将西文字体写在中文字体的前面。
虽然用户群体中使用 Windows 系统较多，但 Mac 用户大部分会下载 Office，所以会存在许多 Windows 下常见的字体，比如微软雅黑。将 macOS 系统的字体写在 Windows 的前面，可以保证在对应平台显示更好的效果。
先了解 serif（衬线体）与 sans-serif（无衬线体）
衬线体与无衬线体是两种最基础的字形分类，衬线体在笔画开始与末端的地方有像小三角的装饰。
衬线体更多使用在印刷品上，在纸张上有棱角的字体更容易被识别。而在屏幕显示中字体过多的装饰点缀容易造成视觉疲劳，所以在屏幕显示中更多使用无衬线体。
一些常见常用的字体：
网页设计中局部字体 第9篇
在 CSS 中，可以通过 font-family 引用多种系列、多种字体，并且可以对字体先后顺序进行设置。
当用户打开一个网页的时候，浏览就会读取 font-family 第一个引用的字体，并去检索用户当前操作系统下的字体，如有就显示，如没有就检索下一个，以此类推。
若浏览器找不到指定的字体，或者没有设置 font-family 则会 fallback 到浏览器的默认字体。
网页设计中局部字体 第10篇
说到Arial，这套字体是微软公司网页核心字体之一，最常用的sans serif字体，当字号很小时不容易阅读。但是，大写的“I”和小写的“l”是无法区别的，所以一般可以考虑用Tahoma字体来替代。这套字体方正、不花巧、方便阅读和印刷清晰。使用范围也是特别的广泛。但是要知道的是，苹果系统下是没有这套字体的，苹果系统下默认的是Helvetica。
可以看下禅道项目管理软件的英文网站，幻灯片采用的字体就是Arial，可以看下这套字体在幻灯片下粗细的组合形态。
网页设计中局部字体 第11篇
说到英文的称线字，肯定首选是Georgia。这套字体笔划粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还不错。此种字体风格优雅又精致，可用于电影海报、游戏、时尚类网页设计中。
林肯的官网，Georgia是官网的第二优先选择显示的字体。网站比较现代，在一些幻灯片当中结合了Georgia字体，称线字和非称线字的相结合，可以使得整个网站更生动。
在专业的网页设计里，除了Banner图、广告语等特殊情况可能会用到特殊字体，网页中使用的字体以不超过2种为准，并且最好采用标准字体，比如中文的宋体、微软雅黑，英文的Arial、Helvetica。只有使用这些系统自带的字体，才能让前端开发人员在排版时高程度地还原设计稿的文字效果。倘若使用了特殊字体，在设计font-family的时候，应该多设置几种字体的优先顺序，以确保网页显示的最佳效果。当然，我们一般情况下建议使用系统自带的字体。
以上8种网站中常用的字体介绍和示例，希望可以对大家有所帮助。
网页设计中局部字体 第12篇
如果项目中只是少量地方使用特殊字体，可以考虑切图，导出 .svg 格式（比 .png 更清晰）导出前，将文本轮廓化，使文字变成形状，不然可能会导致 svg 内部字体失效，如下图：
用 font-family 的属性引用不可商用的字体，并且网页中也能显示这种字体，不会构成侵权问题，也不需要进行额外的授权许可。因为能够用 font-family 引用成功的字体是用户系统内本身就存在的字体。
但这只限于在电脑中显示，如果对网页截下来的图片用于宣传，就脱离了电脑系统的范围，这时没有购买字体版权的话就属于侵权。
使用 @font-face 需要将字体文件下载后上传项目或服务器引用，使页面显示字体不再依赖用户系统自带字体，这时如要使用到不可商用的字体，需要购买字体版权，否则就属于侵权。
设定字体字重的属性 font-weight 的值可以使用短语或者数字（权重级别），短语有效值为 normal 和 bold，数字的有效值为 100-900。
短语的 normal 对应数字的 400，也就是设计软件中常见到的“常规体“，bold 对应 700。
浏览器在渲染字体的时候，会从字体中找到对应的权重级别进行渲染，但并不是每个字体都有 100-900 的权重级别，有些字体只提供 normal 和 bold 两种字重，就拿常见的 Arial 和 Noto Sans（思源黑体）中西文混合举例：
上图看起来西文字体会比中文字体更粗一些，在设计软件内设置字体为“中粗体”，那么 font-weight 的值就为 500。
由于西文 Arial 只有 normal 和 bold 两种字重，500 的权重级别大于了 normal 对应的 400，所以显示了 bold(700)，而 Noto Sans (思源黑体)字体提供了对应 500 的中粗体，因此出现了中西文字体的字重不统一。