amazeui學習筆記--css（基本樣式3）--文字排版Typography

一、總結

1、字體：amaze默認非?襯線字體（sans-serif）

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

3、樣式不能正常顯示：拷貝過來的很多樣式在博客中都不能正常顯示?

?

?

二、文字排版Typography

目錄

• 字體
  • 字體定義
  • 字體輔助 Class
  • Webkit 反鋸齒
  • 字體相關鏈接
• 元素基本樣式
  • 標題 <h1> - <h6>
  • 段落 <p>
  • 分隔線 <hr>
  • 引用 <blockquote>
  • 代碼塊 <pre>
  • 列表 ul/ol
  • 定義列表
  • 表格 <table>
  • 圖片 <img>
  • 其他元素

很多設計師喜歡用英文，因為中文排版真的不太容易搞。中文字符多、不同字符的筆畫差異也很大，使用英文時高大上的設計稿，替換成中文以后，可能會大打折扣。

網頁設計中，針對中文排版的研究很少，沒有太多現成的結論供參考。Amaze UI 只能根據一些經驗，在字體設置、字號上做一些更適合中文的設置。

字體

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.
千萬不要因為走得太久，而忘記了我們為什么出發。
千萬不要因為走得太久，而忘記了我們為什麼出發。

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

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

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>

參考鏈接：

• -webkit-font-smoothing
• Better font-rendering on OSX

字體相關鏈接

主流系統中附帶的字體

• List of Microsoft Windows fonts
• List of typefaces included with OS X
• Common fonts to all versions of Windows & Mac equivalents
• OS X：Mavericks 附帶的字體
• OS X：Mountain Lion 附帶的字體
• iOS 7：字體列表
• iOS 6：字體列表
• Windows UI 設計文檔
• Supported UI Fonts in Windows Phone
• Typography | Android Developers

中文排版相關開源項目

• 「漢字標準格式」——印刷品般的漢字網頁排版框架
• Entry.css - 可配置的、更適合閱讀的中文文章樣式庫

元素基本樣式

標題?<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

條目 #2

條目 #1

條目 #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>	我比別人小一些

轉載于:https://www.cnblogs.com/Renyi-Fan/p/9006060.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的amazeui学习笔记--css（基本样式3）--文字排版Typography的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。