阅读(4086) (0)

Amaze UI 之 CSS 中的文字排版

2016-10-28 12:03:46 更新
许多设计师喜欢用英文,是因为中文排版不好弄。使用英文时高大上的设计稿,替换成中文以后,经常会大打折扣,这是由于中文字符多、不同字符的笔画差异大引起的。

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

1.字体

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


1.1 字体定义

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 分发版包含的字体。
1.2 字体辅助 Class
在 Amaze UI 的实践中,font-family 设置只在 Base 样式中出现了一两次。在具体项目中,我们也不建议到处设置 font-family,虽然 Amaze UI 提供了设置字体的辅助 class。
  • .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 文档


1.3 Webkit 反锯齿

另外,在 Webkit 浏览器下还设置了反锯齿平滑渲染,渲染出来要纤细一些,其他内核的浏览器上看着稍粗一些。
2014.10.10 update: 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;
}
平滑字体

参考链接:


1.4 字体相关链接


主流系统中附带的字体

中文排版相关开源项目

2.元素基本样式

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

2.2 段落 <p>
段落
2.3 分隔线 <hr>

分隔线

2.4 引用 <blockquote>
来源放到 <small> 元素里面。
引用
2.5 代码块 <pre>
更多细节请点击 Code查看。
代码块

2.6 列表 ul/ol
无序列表(<ul>):
无序列表
有序列表(<ol>):
有序列表
2.7 定义列表
定义列表
2.8 表格 <table>
这里只是 normalize 以后的样式,更多样式查看 Table 组件
表格
2.9 图片 <img>
更多样式查看 Image 组件
图片
2.10 其它元素
其它元素