Amaze UI

Typography 文字排版


网页设计中,针对中文排版的研究很少,没有太多现成的结论供参考。Amaze UI 只能根据一些经验,在字体设置、字号上做一些更适合中文的设置。

字体

Amaze UI 主要使用非衬线字体(sans-serif),在 <code><pre> 等元素上则设置了等宽字体(monospace)。

字体定义

body {
  font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
}
  • Segoe UI - Windows UI 字体(从 Windows Vista 开始使用);
  • Helvetica Neue 是 iOS7 及 OSX 10.10 UI 字体(在部分文字垂直居中的场景有一些小问题,暂时先使用 Lucida Grande);
  • 有些 Windows 用户安装了丽黑字体,丽黑字体在 Windows 上渲染出来很模糊,所以把微软雅黑放在苹果丽黑之前;
  • FreeSans - 包括 Ubuntu 之类的 Linux 分发版包含的字体。

字体辅助 Class

在 Amaze UI 的实践中,font-family 设置只在 Base 样式中出现了一两次。在具体项目中,我们也不建议到处设置 font-family,虽然 Amaze UI 提供了设置字体的辅助 class。

下面为几种字体系列的演示:

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。

  • .am-sans-serif 非衬线字体,Amaze UI 主要使用的。
  • .am-serif 衬线字体,中文显示宋体,Amaze UI 中未使用。
  • .am-kai 数字英文显示衬线字体,中文显示楷体。和 .am-serif 的区别仅在于中文字体,Amaze UI 中把 <blockquote> 的字体设置成了 .am-kai
  • .am-monospace 等宽字体,Amaze UI 源代码中使用。

严格来说,楷体属于手写体系列(cursive),不过英文的手写字过于花哨,所以在 .am-kai 中英文使用 serif。关于五种字体的定义,可以查看 W3C 文档

Webkit 反锯齿

另外,在 Webkit 浏览器下还设置了反锯齿平滑渲染,渲染出来要纤细一些,其他内核的浏览器上看着稍粗一些。

OSX 平台的 Firefox 从 v25 增加了 -moz-osx-font-smoothing,实现类似 Webkit 的字体渲染效果。

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

如果不喜欢,可以重置成浏览器的默认平滑字体。

body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

开启反锯齿 -webkit-font-smoothing: antialiased;

The quick brown fox jumps over the lazy dog.
千万不要因为走的太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。


未开启反锯齿 -webkit-font-smoothing: subpixel-antialiased;

The quick brown fox jumps over the lazy dog.
千万不要因为走的太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。

参考链接:

字体相关链接

主流系统中附带的字体

中文排版相关开源项目

元素基本样式

标题 <h1> - <h6>

h1 标题1

h2 标题2

h3 标题3

h4 标题4

h5 标题5
h6 标题6

<h1> - <h6> 保持粗体,设置了边距;<h1> 为正常字号的 1.5 倍;<h2> 为正常字号的 1.25 倍;其他保持正常字号。

段落 <p>

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。乱石穿空,惊涛拍岸,卷起千堆雪。

分隔线 <hr>


引用 <blockquote>

来源放到 <small> 元素里面

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。乱石穿空,惊涛拍岸,卷起千堆雪。江山如画,一时多少豪杰。遥想公瑾当年,小乔初嫁了,雄姿英发。羽扇纶巾,谈笑间,樯橹灰飞烟灭。故国神游,多情应笑我,早生华发。人生如梦,一尊还酹江月。

苏轼 ——《念奴娇 赤壁怀古》

代码块 <pre>

更多细节查看 Code

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

列表 ul/ol

无序列表(<ul>):

  • 条目 #1
  • 条目 #2
    • 条目 #1
    • 条目 #2
      • 条目 #1
      • 条目 #2
  • 条目 #3
  • 条目 #4

有序列表(<ol>):

  1. 条目 #1
  2. 条目 #2
    1. 条目 #1
    2. 条目 #2
      1. 条目 #1
      2. 条目 #2
  3. 条目 #3
  4. 条目 #4

定义列表

响应式网页设计
自适应网页设计(英语:Responsive web design,通常缩写为RWD)是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他移动产品设备)上阅读和导航,同时减少缩放、平移和滚动。
响应式网页设计(RWD)的元素
采用 RWD 设计的网站 使用 CSS3 Media queries,即一种对 @media 规则的扩展,以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。

表格 <table>

这里只是 normalize 以后的样式,更多样式查看 Table 组件

表格标题
表头 #1表头 #2表头 #3
数据 #1数据 #2数据 #3
数据 #1数据 #2数据 #3
表页脚 #1表页脚 #2表页脚 #3

图片 <img>

更多样式查看 Image 组件

其他元素

元素基本样式
<a>一个超链接
<em>在 em 元素内
<strong>加粗的文字内容,常用于强调
<code>行内代码
<del>显示删除的内容
<ins>已经被插入文档中的文本
<mark>标签定义带有记号的文本
<q>标签用于简短的行内引用
<abbr>响应式设计缩写 RWD
<dfn>定义一个东西 DLNA
<small>次要文字内容,字体较小