Type.css

为中文排版而生

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

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

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

Type.css 做了如下优化

  1. 默认字号设为 14px,更加便于阅读。
  2. 字体根据不同的操作系统和浏览器做最佳适配:
    • Windows 优先使用「微软雅黑」
    • OS X 10.6 及其以上版本使用「冬青黑体简体中文(Hiragino Sans GB)」
    • OS X 10.6 以下及 iOS 使用系统默认的「华文黑体」
    • Linux 优先使用「文泉驿微米黑(Wenquanyi Micro Hei)」
  3. 针对特定的 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>