Amaze UI 之 CSS 中的文字排版.pdfVIP

Amaze UI 之 CSS 中的⽂字排版 许多设计师喜欢⽤英⽂，是因为中⽂排版不好弄。使⽤英⽂时⾼⼤上的设计稿，替换 成中⽂ 后，经常会⼤打折扣，这是由于中⽂字符多、不同字符的笔画差异⼤引起 的。 因此 Amaze UI 设计了更适合中⽂的排版设置，在⽹页设计中，针对中⽂排版的研究 很少，没有太多现成的结论供参考。Amaze UI 也只能根据⼀些经验，在字体设置、 字号上做⼀些适当的改变。 1.字体 Amaze UI 主要使⽤⾮衬线字体 （sans-serif ），在 code 、pre 等元素上则设置了等 宽字体 （monospace ）。 1.1 字体定义 body { font-family : Segoe UI, Lucida Grande, Helvetica, Arial, Mi } Segoe UI - Windows UI 字体 （从 Windows Vista 开始使⽤）； Helvetica eue 是 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 浏览器下还设置了反锯齿平滑渲染，渲染出来要纤细⼀些，其他内 核的浏览器上看着稍粗⼀些。 20 14 .10 .10 update: OSX 平台的 Firefox 从 v25 增加了 -moz-osx-font-smoothing ，实现类 似 Webkit 的字体渲染效果。 body { -webkit-font- moothing: antialia ed; -moz-o x-font- moothing: gray cale; } 如果你不喜欢，可 重置成浏览器的默认平滑字体。 body { -webkit-font- moothing: ubpixel-antialia ed; -moz-o x-font- moothing: auto; } 参考链接： -webkit-font-smoothing Better font-rendering on OSX 1.4 字体相关链接 主流系统中附带的字体 List of Microsoft Windows fonts List of typefaces included with OS X Common fonts to all versions of Windows Mac equivalents OS X ：Mavericks 附带的字体 OS X ：Mountain Lion 附带的字体 iOS 7 ：字体列表 iOS 6 ：字体列表 Windows UI 设计⽂档 Supported UI Fonts in Windows Phone Typography | Android Develope