CSS LESS 开发规范

4 文本编排

4.1 字体族

[必须] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在双引号中。

说明：

所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：

示例：

h1 {
    font-family: "Microsoft YaHei";
}

[必须] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )。

说明：

更详细说明可参考本文。

示例：

/* Display according to platform */
.article {
    font-family: Arial, sans-serif;
}

/* Specific for most platforms */
h1 {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}

[必须] font-family 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一。

示例：

/* good */
body {
    font-family: Arial, sans-serif;
}

h1 {
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

/* bad */
body {
    font-family: arial, sans-serif;
}

h1 {
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

4.2 字号

[必须] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。

说明：

由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。

4.3 字体风格

[建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。

说明：

由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。

4.4 字重

[必须] font-weight 属性必须使用数值方式描述。

说明：

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。

浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的="" Regular="" 字重，="">=700 时匹配 Bold 字重。

但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表)，故使用数值描述增加了灵活性，也更简短。

示例：

/* good */
h1 {
    font-weight: 700;
}

/* bad */
h1 {
    font-weight: bold;
}

4.5 行高

[建议] line-height 在定义文本段落时，应使用数值。

说明：

将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。

当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。

示例：

.container {
    line-height: 1.5;
}

4.6 笔戈项目中的文本编排规范

说明：

该规范暂时以项目中typography.less的写法为准

示例：

@font-family:  'Lucida Grande', 'Helvetica Neue', Arial,
'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;

@line-height: 1.7;

@font-size-large: 18px;
@font-size-base: 16px;
@font-size-small: 14px;

@font-size-h1: 40px;
@font-size-h2: 32px;
@font-size-h3: 22px;