字体

在ZUI中我们定义了三种字体家族已适应不同的场合。这些字体在中英文环境下都能够很好的显示。

无衬线字体 "Helvetica Neue", Helvetica, Tahoma, Arial, 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif
衬线字体 Georgia, "Times New Roman", Times, serif
等宽字体 Monaco, Menlo, Consolas, "Courier New", monospace

使用无衬线字体来作为页面的默认字体,因为无衬线字体非常适合在屏幕上显示;衬线字体作为一个额外的选择,但并不推荐在小字号中使用,但可以用于特殊文字或者标题中;等宽字体用来显示程序代码。

默认的字体大小为 13px,以保证在所有屏幕上都能有最佳效果。ZUI中也允许使用更小号的字体,不过不要小于 12px。默认行高为字体大小的1.38倍,一般为18px。一至六级标题的行高为字体大小的1.2。

文字排版

字是组成页面的重要内容,一个好的排版是构建好的用户界面的基石。应根据我们的设计原则来进行文字排版。下表中列举了web设计时会用到的文字排版方式。

元素 标签 字体大小 说明

页面标题

<h1> 26px 在一个页面只有一个页面标题。

标题

<h2> 22px 作为页面第二级标题,可能在一个页面中使用到多个二级标题。

三级标题

<h3> 16px 粗体 页面第三级标题,嵌套在二级标题下使用。

四级标题

<h4> 15px 粗体 页面第四级标题,嵌套在三级标题下使用。
五级标题
<h5> 13px 粗体 颜色灰色 页面第五级标题,嵌套在四级标题下使用。
六级标题
<h6> 12px 粗体 颜色灰色 页面第六级标题,嵌套在五级标题下使用。

这是一个段落

<p> 13px 正文中大部分由段落组成。段落的行高为20px。段落间在垂直方向上有10px边距。

这是一个突出的段落

<p class="lead"> 20px 突出的段落具有更大的字体,在一个段落上加.lead类。
粗体文本 <strong> 13px 通常粗体文本用来强调内容。
斜体文本 <em> 13px
小的文本 <small> 12px 颜色灰色 small文本字体只有正常字体大小的85%,通常为11.9px。
超链接 <a> 13px 超链接具有不同的颜色以区别其他文本,超链接仅当鼠标悬停时会增加下划线。
  1. 这是一个有序列表
  2. 包含三个列表项
  3. 作为示例
<ol><li>...</ol> 13px 当组织一些并列项目且关注项目之间顺序时可以使用有序列表。
  • 这是一个无序列表
  • 包含三个列表项
  • 作为示例
<ul><li>...</ul> 13px 当组织一些并列项目但不关注项目之间顺序时可以使用无序列表。
这是一大段引用内容
<blockquote> 13px 用于显示一大段引用的内容。
这是内嵌的引用 <q> 13px 用于在正文行内显示引用的术语。
<div>
  <p>代码区域</p>
</div>
<pre><code>...</code> 13px 等宽字体 代码区域会加上方框,并使用等宽字体显示,详细代码显示规定请参见节代码高亮