Type.css

为中文排版而生

国外现有的 CSS 解决方案（例如： Bootstrap，Normalize，CSS Reset 等）都没有专门针对中文排版进行优化，Type.css 就是为了解决这个问题而生，以 Neat.css 为基础，让普通使用者无需考虑排版细节，快速应用到博客、文章等大面积中文排版的地方。

中文排版有如下几个难点：

网页中可用简体中文字体较少，字体字号的选择尤为重要
不同浏览器及操作系统的渲染差异
特定 HTML 标签在中文排版中的用法，例如专名号 <u>

Type.css 做了如下优化

默认字号设为 14px，更加便于阅读。
字体根据不同的操作系统和浏览器做最佳适配：
- Windows 优先使用「微软雅黑」
- OS X 10.6 及其以上版本使用「冬青黑体简体中文（Hiragino Sans GB）」
- OS X 10.6 以下及 iOS 使用系统默认的「华文黑体」
- Linux 优先使用「文泉驿微米黑（Wenquanyi Micro Hei）」
针对特定的 HTML 标签做优化，见示例

注意事项

下划线

在 Type.css 中，为了更好的解决中英文混排下划线粘连的问题，我们使用border-bottom来模拟下划线。

.type a:hover,
.type ins:hover {
    text-decoration: none;
    border-bottom: 1px solid;
}

如此一来的副作用就是在非纯文字排版的地方就会影响盒模型，可以在父级元素加上 no-underline这个class 来修复。

.no-underline a:hover,
.no-underline ins:hover {
    border: 0 none;
    text-decoration: underline;
}

因此，.type 不应该大范围使用，以尽量局限在含有大段文字、需要文字排版的容器上为佳，例如：

<body>
  <nav>
    <!-- navigation -->
  </nav>
  <article class="type">
    <h1>...</h1>
    <p>...</p>
    <h2>...</h2>
    <p>...</p>
    ...
  </article>
</body>