amazeui学习笔记--css（基本样式3）--文字排版Typography

一、总结

1、字体：amaze默认非 衬线字体（sans-serif）

2、引用块blockquote和定义列表：引用块blockquote和定义列表（dl dt）注意一下

3、样式不能正常显示：拷贝过来的很多样式在博客中都不能正常显示

二、文字排版Typography

字体

Amaze UI 主要使用非衬线字体（sans-serif），在 <code>、<pre> 等元素上则设置了等宽字体（monospace）。

字体定义

Copy

body {
  font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
}

Segoe UI - Windows UI 字体（从 Windows Vista 开始使用）；
Helvetica Neue 是 iOS7 及 OSX 10.10 UI 字体（在部分文字垂直居中的场景有一些小问题，暂时先使用 Lucida Grande）；
有些 Windows 用户安装了丽黑字体，丽黑字体在 Windows 上渲染出来很模糊，所以把微软雅黑放在苹果丽黑之前；
FreeSans - 包括 Ubuntu 之类的 Linux 分发版包含的字体。

字体辅助 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 源代码中使用。

下面为几种字体系列的演示：

Copy

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

<p>...</p>
<p class="am-serif">...</p>
<p class="am-kai">...</p>
<p class="am-monospace">...</p>

严格来说，楷体属于手写体系列（cursive），不过英文的手写字过于花哨，所以在 .am-kai 中英文使用 serif。关于五种字体的定义，可以查看 W3C 文档。

Webkit 反锯齿

另外，在 Webkit 浏览器下还设置了反锯齿平滑渲染，渲染出来要纤细一些，其他内核的浏览器上看着稍粗一些。

2014.10.10 update: OSX 平台的 Firefox 从 v25 增加了 -moz-osx-font-smoothing，实现类似 Webkit 的字体渲染效果。

Copy

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

如果你不喜欢，可以重置成浏览器的默认平滑字体。

Copy

body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

Copy

开启反锯齿 `-webkit-font-smoothing: antialiased;`

The quick brown fox jumps over the lazy dog.
千万不要因为走的太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

未开启反锯齿 `-webkit-font-smoothing: subpixel-antialiased;`

The quick brown fox jumps over the lazy dog.
千万不要因为走的太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

<h3>-webkit-font-smoothing: antialiased;</h3>
<p>
  The quick brown fox jumps over the lazy dog. <br/>
  千万不要因为走的太久，而忘记了我们为什么出发。 <br/>
  千萬不要因為走得太久，而忘記了我們為什麼出發。
</p>
<br/>
<div style="-webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto">
  <h3>-webkit-font-smoothing: subpixel-antialiased;</h3>
  <p>
    The quick brown fox jumps over the lazy dog. <br/>
    千万不要因为走的太久，而忘记了我们为什么出发。 <br/>
    千萬不要因為走得太久，而忘記了我們為什麼出發。
  </p>
</div>

参考链接：

字体相关链接

主流系统中附带的字体

中文排版相关开源项目

元素基本样式

标题 `<h1> - <h6>`

<h1> - <h6> 保持粗体，设置了边距；<h1> 为正常字号的 1.5 倍；<h2> 为正常字号的 1.25 倍；其他保持正常字号。

Copy

h1 标题1

h2 标题2

h3 标题3

h4 标题4

h5 标题5

h6 标题6

<h1>h1 标题1</h1>
<h2>h2 标题2</h2>
<h3>h3 标题3</h3>
<h4>h4 标题4</h4>
<h5>h5 标题5</h5>
<h6>h6 标题6</h6>

段落 `<p>`

Copy

无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。

<p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>

分隔线 `<hr>`

Copy

<hr/>

引用 `<blockquote>`

来源放到 <small> 元素里面。

Copy

无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。

马尔克斯 ——《百年孤独》

<blockquote>
  <p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>
  <small>马尔克斯 ——《百年孤独》</small>
</blockquote>

代码块 `<pre>`

更多细节查看 Code。

Copy

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

<pre>window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);
</pre>

列表 ul/ol

无序列表（<ul>）：

Copy

条目 #1
条目 #2
- 条目 #1
- 条目 #2
  - 条目 #1
  - 条目 #2
条目 #3
条目 #4

<ul>
  <li>...</li>
  <li>...
    <ul>
      <li>
        <ul>
          <li>...</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

有序列表（<ol>）：

Copy

条目 #1
条目 #2
1. 条目 #1
2. 条目 #2
  1. 条目 #1
  2. 条目 #2
条目 #3
条目 #4

<ol>
  <li>...</li>
  <li>...
    <ol>
      <li>
        <ol>
          <li>...</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

定义列表

Copy

响应式网页设计: 自适应网页设计（英语：Responsive web design，通常缩写为RWD）是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
响应式网页设计（RWD）的元素: 采用 RWD 设计的网站使用 CSS3 Media queries，即一种对 @media 规则的扩展，以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。

<dl>
  <dt>响应式网页设计</dt>
  <dd>自适应网页设计（英语：Responsive web design，通常缩写为RWD）是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。</dd>
  <dt>响应式网页设计（RWD）的元素</dt>
  <dd>采用 RWD 设计的网站 使用 CSS3 Media queries，即一种对 @media 规则的扩展，以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。</dd>
</dl>

表格 `<table>`

这里只是 normalize 以后的样式，更多样式查看 Table 组件。

Copy

表格标题
表头 #1	表头 #2	表头 #3
数据 #1	数据 #2	数据 #3
数据 #1	数据 #2	数据 #3
表页脚 #1	表页脚 #2	表页脚 #3

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>...</td>
    </tr>
  </tfoot>
</table>

图片 `<img>`

更多样式查看 Image 组件。

Copy

<img class="am-img-responsive" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/>

其他元素

元素	基本样式
`<a>`	这是一个超链接
`<em>`	我在 em 元素里
`<strong>`	strong 元素，壮吧
`<code>`	`行内代码`
`<del>`	~~在我的胸口划一刀~~
`<ins>`	强势插入的元素
`<mark>`	我被贴上 mark 标签了
`<q>`	我在 q 元素里面 q 元素里面的 q元素 q 元素
`<abbr>`	响应式设计缩写 RWD
`<dfn>`	定义一个东西 DLNA
`<small>`	我比别人小一些