网页字体排印指南

排版者应像手艺人一样遵循一条原则:做好自己的工作并隐于无形.

关于

网页上百分之九十五的信息是「文字」,大多数人浏览网页的状态就是阅读,也就是你目前正在做的事情. 因此作为一名前端工程师,让文字更好地在网页显示,是一件极其重要的工作.

字体排印有两种形式,一种称为 Creative Typography,另一种称为 Technical Typography. 前者倾向于设计,比如选择的字体表达的情绪,字间距的设定带来的视觉影响. 而后者更倾向于技术,以一套有迹可循的规则进行应用,比如实现「齐头尾」如何避免中西文混排造成的字间距拉伸,以及选择什么样的 font-family可以在多平台上最优显示等等.

本文主要围绕 Technical Typography 进行讨论.

选择字体

在 Web 上应用字体,是一门技术,同时也是一门艺术. 由于计算机历史发展的原因,西文有大量优秀的字体可供选择,可对于中文来说就是一项挑战. 主流操作系统提供的本地中文字体极少,另一方面中文字体组成的特殊性,其体积过于庞大,无法良好地使用 webfont. 所以编写健壮的 font-family 是一件需要深思熟虑的事情.

以下列出各种平台下合适的中西文字体:

桌面端 Mac, Windows, Linux 上适合网页显示的优秀中文字体
Mac Windows Linux
冬青黑体 
Hiragino Sans GB
中易宋体 
SimSun
文泉驿微米黑 
WenQuanYi Microhei
黑体-简(华文黑体) 
Heiti SC (STHeiti)
微软雅黑 
Microsoft YaHei
宋体-简(华文宋体) 
Songti SC (STSong)
移动端 iOS, Android 上适合网页显示的优秀中文字体
iOS Android
黑体-简(华文黑体) 
Heiti SC (STHeiti)
思源黑体 
Noto Sans CJK SC
Droid Sans Fallback
主流操作系统上适合网页显示的优秀西文字体
无衬线 衬线 等宽
Lucida Grande Georgia Menlo
Helvetica Neue Times New Roman Courier
Arial

抛开宋/明体长时间作为系统默认字体,所产生的审美疲劳,宋/明体相比黑体是更合适作为内文字体. 大多的宋/明体针对内文设计,横细直粗,造型方正,笔画在小字号的情况下,不会糊在一起,给人一种素雅的感觉. 而黑体笔画粗壮有力,引人注目,更适合作为标题使用.

但大部分人已经习惯在网页上阅读黑体,以及宋/明体在字重过大的情况下,显示效果还是不太理想. 所以内文默认提供黑体,可选择性的切换宋/明体.

按照以上表格提供的中文字体,为此我为内文和标题编写两套 font-family. 关于这两套 font-family 的选择和排序,等空闲时,再写一篇文章谈下.

p { font-family: "Georgia", "Times New Roman", "Songti SC", "SimSun", serif; }   h1, h2, h3, h4, h5, h6 { font-family: "Lucida Grande", "Helvetica Neue", "Arial", "Hiragino Sans GB", "Noto Sans CJK SC", "Heiti SC", "Microsoft YaHei", "WenQuanYi Microhei", sans-serif; } 

垂直的旋律

音阶

Robert Bringhurst 在《The Elements of Typographic Style》谈到字号大小之间的比例,形似于音乐中的音阶. 作曲时以某个特定的音阶为基础,才会形成特定的风格. 字号的排版同样如此,有规律的字号变化,才会形成特定的排版风格.

将内文以 16px 作为字号 
标题h1, h2, h3, h4, h5, h6以 16px 作为字号基础,按同比例的递减

p  { font-size: 16px; }   h1 { font-size: 2em; }   h2 { font-size: 1.8em; }   h3 { font-size: 1.6em; }   h4 { font-size: 1.4em; }   h5, h6 { font-size: 1.2em; } 

节拍

此外,Robert Bringhurst 还谈到版式中的空间就像音乐中的时间(Space in typography is like time in music),言下之意,把握间距(行高)就如把握节拍. 节拍是对时间的分割,倘若抢拍便失去节奏. 文字的间距(行高)亦是对空间的分割,不一致间距(行高)比例,便会失去「垂直的旋律」.

将内文以 1.7em 作为行高 
标题 h1, h2, h3, h4, h5, h6以 1.5em 作为行高.

p { line-height: 1.7em; }   h1, h2, h3, h4, h5, h6 { line-height: 1.5em; } 

段首缩进 VS 段落间距

段落分隔对于中文排版而言也是特别重要,主要以「段首缩进」和「段落间距」两种方式表现,它们的唯一目的就是将段落分隔.

「段首缩进」主要用于印刷书籍,节省纵向空间,保持文本连贯,但一般在网页上的阅读速度较快,会使文字过于密集产生压力. 相反「段落间距」主要用于网页,充分利用网页无限的纵向空间,保障文本块的整洁,同时给予长篇阅读休息的间隙. 所以一般网页排版,会考虑选择「段落间距」,可以设置以下属性实现「段落间距」.

p { margin-bottom: 1.7em; }   h1, h2, h3, h4, h5, h6 {     margin-top: .7em;   margin-bottom: 0.2em; } 

对齐

汉字的方块性质构成了汉字独有的艺术美感,使其具有工整的特点,从而显现出中文排版的重要原则:所有元素都是正方体. 但从二十世纪开始使用标点后,以及中西文混排的情况越来越多,为了保证「禁则处理」和「齐头尾」实现,可能需要在不同条件下进行适当的断词处理.

「禁則」是来自日语的排版术语,主要指的就是禁止一些标点等字符出现在行首或行尾的规则,大致相当于汉语常说的「避头尾」.

可以设置以下属性实现「齐头尾」,其中inter-ideographic意思是「通过调整单词和字符之间的留白来实现两端对齐」.

p {   text-align: justify;   text-justify: inter-ideographic;   } 

但这样的「齐头尾」并不是完美的,主要由于技术遗留原因,在 Windows 和 Linux 上的 webkit 浏览器并没有实现 inter-ideographic 导致中西文混排的时候,容易出现过度拉伸字间距的情况.

左侧: inter-ideographic | 右侧: break-all

为此有一种不优雅的解决方案,在极易出现字间距拉伸的小尺寸屏幕(手机)上使用「断词处理」,避免字间距拉伸,可是这样也带来「无视避头尾规则」和「西文单词断词」的坏毛病. 这是用一种不优雅解决另一种不优雅,按需抉择吧.

可以设置以下属性进行「断词处理」.

p { word-break: break-all; }  
时间: 2024-10-10 17:46:49

网页字体排印指南的相关文章

网页字体知识

重新开始写博客.一点一点积累,不间断. 看了阮一峰老师的中文网页字体开发指南,做一些记录. 完整原文 http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html 1:font-family规则 font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif

网页字体助手 WebFont Helper

网页字体助手 是 Windows 平台离线的网页字体生成辅助工具.核心功能,采用 python 编写. WebFont Helper 功能特色 生成字体子集(即提取用到的字符生成字体,或者大家所说的字体压缩): 字体压扁或压矮: 提取 ttf 文件中的用到的字符: 字体转换:ttf 转 woff, svg, eot 等: Windows 资源管理器 右键整合: 剪贴板生成字体: 完全离线 代码开源 任意修改: 下载 Download 请在 Download 下载 github 项目地址: htt

iOS WKWebview 网页开发适配指南

iOS WKWebview 网页开发适配指南 微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配.如有问题,可参考文末联系方式,向我们咨询. 背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的支持最新Webkit功能的网页浏览控件,摆脱过去 UIWebView的老.旧.笨,特别是内存占用量巨大的问题.它使用与Safari中一样的Nitro JavaScript引擎,大大提高了页面js执行速度. 切换方

网页字体介绍以及网页常用字体设置

网页字体设置不同于平面设计等其他媒体设计有更多的艺术字体可供选择. 因为网页设计中永远不要假设客户的电脑上有你使用的字体.为了让我们的网页在绝大多数访客的电脑上看起来一致.就必须使用绝大多数访客电脑上都有的字体. 网页中的字体是通过css设定,如:font-family:'Microsoft Yahei',"simsun"; 意思是先找微软雅黑,如果没有就使用宋体字,当然,如果你的客户是windows中国用户宋体是默认字体,此时font- family:'Microsoft Yahei

使用 Cufon 渲染网页字体

这是一篇关于 Cufon 技术的小文章.什么是 Cufon 呢?简单的说,Cufon 是一个用来替代 sIFR 框架,实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库. 为什么要使用 Cufon 那么为什么要使用 Cufon 呢?这要从 Web 开发人员,所经常面对的一种"冲突",即"字体(Font Family)冲突"开始讲起. 通常的这一冲突总是爆发于 Web 页面的设计者(Designer)和开发者(Coder)之间.在很多场合下,Web

[转载]网页字体设置你了解吗?

以前做项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等类似的字体,然而当更多的设备和系统出现后,以前这样的设置已不能满足网页在各设备上的显示需求. 就拿最简单的宋体(simsun)来说吧,在Windows系统下显示是一个比较容易阅读的字体,然而在Mac上简直无法直视,如下图给出一个优化前后页面的对比效果: 出处:http://ued.ctrip.com/blog 因此,出于种种原因,促使我不得不去

网页字体大小控制

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页字体大小</title> <script src="jquery-1.4.2.js"></script> <script type="text/javascript"> $(func

可以尝试用Google Font API来摆脱网页字体的单调

在网页设计里,字体的显示是个问题.最普遍用的是宋体,但是宋体在 Win 7 下的表现真的很难看.雅黑端庄一些,但是随着字体大小,感觉汉字的大小也会有区别.小站现在用的字体是是宋体 + Arial/Georgia,因为习惯了也没多在意,其实对于英文字体有其它更好的选择. 比如 Bitter 字体,用来做标题倒是不错:豪享博娱乐城 <div style="text-align:center; font-size:24px; font-family:Bitter;">Welcom

Type.js – 帮助你更好的控制网页字体排版

Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就可以用新的 CSS 属性了,就像编写任何其他的样式一样. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果