amazeui學(xué)習(xí)筆記--css（基本樣式3）--文字排版Typography

一、總結(jié)

1、字體：amaze默認(rèn)非?襯線字體（sans-serif）

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

3、樣式不能正常顯示：拷貝過(guò)來(lái)的很多樣式在博客中都不能正常顯示?

?

?

二、文字排版Typography

目錄

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

很多設(shè)計(jì)師喜歡用英文，因?yàn)橹形呐虐嬲娴牟惶菀赘?/span>。中文字符多、不同字符的筆畫(huà)差異也很大，使用英文時(shí)高大上的設(shè)計(jì)稿，替換成中文以后，可能會(huì)大打折扣。

網(wǎng)頁(yè)設(shè)計(jì)中，針對(duì)中文排版的研究很少，沒(méi)有太多現(xiàn)成的結(jié)論供參考。Amaze UI 只能根據(jù)一些經(jīng)驗(yàn)，在字體設(shè)置、字號(hào)上做一些更適合中文的設(shè)置。

字體

Amaze UI 主要使用非襯線字體（sans-serif），在?<code>、<pre>?等元素上則設(shè)置了等寬字體（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 開(kāi)始使用）；
• Helvetica Neue?是 iOS7 及 OSX 10.10 UI 字體（在部分文字垂直居中的場(chǎng)景有一些小問(wèn)題，暫時(shí)先使用?Lucida Grande）；
• 有些 Windows 用戶(hù)安裝了麗黑字體，麗黑字體在 Windows 上渲染出來(lái)很模糊，所以把微軟雅黑放在蘋(píng)果麗黑之前；
• FreeSans?- 包括 Ubuntu 之類(lèi)的 Linux 分發(fā)版包含的字體。

字體輔助 Class

在 Amaze UI 的實(shí)踐中，font-family?設(shè)置只在 Base 樣式中出現(xiàn)了一兩次。在具體項(xiàng)目中，我們也不建議到處設(shè)置?font-family，雖然 Amaze UI 提供了設(shè)置字體的輔助 class。

• .am-sans-serif?非襯線字體，Amaze UI 主要使用的。
• .am-serif?襯線字體，中文顯示宋體，Amaze UI 中未使用。
• .am-kai?數(shù)字英文顯示襯線字體，中文顯示楷體。和?.am-serif?的區(qū)別僅在于中文字體，Amaze UI 中把?<blockquote>?的字體設(shè)置成了?.am-kai。
• .am-monospace?等寬字體，Amaze UI 源代碼中使用。

下面為幾種字體系列的演示：

?Copy

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

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

嚴(yán)格來(lái)說(shuō)，楷體屬于手寫(xiě)體系列（cursive），不過(guò)英文的手寫(xiě)字過(guò)于花哨，所以在?.am-kai?中英文使用?serif。關(guān)于五種字體的定義，可以查看?W3C 文檔。

Webkit 反鋸齒

另外，在 Webkit 瀏覽器下還設(shè)置了反鋸齒平滑渲染，渲染出來(lái)要纖細(xì)一些，其他內(nèi)核的瀏覽器上看著稍粗一些。

2014.10.10 update:?OSX 平臺(tái)的 Firefox 從 v25 增加了?-moz-osx-font-smoothing，實(shí)現(xiàn)類(lèi)似 Webkit 的字體渲染效果。

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

如果你不喜歡，可以重置成瀏覽器的默認(rèn)平滑字體。

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

開(kāi)啟反鋸齒?-webkit-font-smoothing: antialiased;

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩奶?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

未開(kāi)啟反鋸齒?-webkit-font-smoothing: subpixel-antialiased;

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩奶?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

<h3>-webkit-font-smoothing: antialiased;</h3> <p> The quick brown fox jumps over the lazy dog. <br/> 千萬(wàn)不要因?yàn)樽叩奶?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。 <br/> 千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。 </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/> 千萬(wàn)不要因?yàn)樽叩奶?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。 <br/> 千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。 </p> </div>

參考鏈接：

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

字體相關(guān)鏈接

主流系統(tǒng)中附帶的字體

• 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 設(shè)計(jì)文檔
• Supported UI Fonts in Windows Phone
• Typography | Android Developers

中文排版相關(guān)開(kāi)源項(xiàng)目

• 「漢字標(biāo)準(zhǔn)格式」——印刷品般的漢字網(wǎng)頁(yè)排版框架
• Entry.css - 可配置的、更適合閱讀的中文文章樣式庫(kù)

元素基本樣式

標(biāo)題?<h1> - <h6>

<h1> - <h6>?保持粗體，設(shè)置了邊距；<h1>?為正常字號(hào)的?1.5?倍；<h2>?為正常字號(hào)的?1.25?倍；其他保持正常字號(hào)。

?Copy

h1 標(biāo)題1

h2 標(biāo)題2

h3 標(biāo)題3

h4 標(biāo)題4

h5 標(biāo)題5

h6 標(biāo)題6

<h1>h1 標(biāo)題1</h1> <h2>h2 標(biāo)題2</h2> <h3>h3 標(biāo)題3</h3> <h4>h4 標(biāo)題4</h4> <h5>h5 標(biāo)題5</h5> <h6>h6 標(biāo)題6</h6>

段落?<p>

?Copy

無(wú)論走到哪里，都應(yīng)該記住，過(guò)去都是假的，回憶是一條沒(méi)有盡頭的路，一切以往的春天都不復(fù)存在，就連那最堅(jiān)韌而又狂亂的愛(ài)情歸根結(jié)底也不過(guò)是一種轉(zhuǎn)瞬即逝的現(xiàn)實(shí)。

<p>無(wú)論走到哪里，都應(yīng)該記住，過(guò)去都是假的，回憶是一條沒(méi)有盡頭的路，一切以往的春天都不復(fù)存在，就連那最堅(jiān)韌而又狂亂的愛(ài)情歸根結(jié)底也不過(guò)是一種轉(zhuǎn)瞬即逝的現(xiàn)實(shí)。</p>

分隔線?<hr>

?Copy

---

<hr/>

引用?<blockquote>

來(lái)源放到?<small>?元素里面。

?Copy

無(wú)論走到哪里，都應(yīng)該記住，過(guò)去都是假的，回憶是一條沒(méi)有盡頭的路，一切以往的春天都不復(fù)存在，就連那最堅(jiān)韌而又狂亂的愛(ài)情歸根結(jié)底也不過(guò)是一種轉(zhuǎn)瞬即逝的現(xiàn)實(shí)。

馬爾克斯 ——《百年孤獨(dú)》 <blockquote><p>無(wú)論走到哪里，都應(yīng)該記住，過(guò)去都是假的，回憶是一條沒(méi)有盡頭的路，一切以往的春天都不復(fù)存在，就連那最堅(jiān)韌而又狂亂的愛(ài)情歸根結(jié)底也不過(guò)是一種轉(zhuǎn)瞬即逝的現(xiàn)實(shí)。</p> <small>馬爾克斯 ——《百年孤獨(dú)》</small> </blockquote>

代碼塊?<pre>

更多細(xì)節(jié)查看?Code。

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

列表 ul/ol

無(wú)序列表（<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 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（英語(yǔ)：Responsive web design，通常縮寫(xiě)為RWD）是一種網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)做法，該設(shè)計(jì)可使網(wǎng)站在多種瀏覽設(shè)備（從桌面電腦顯示器到移動(dòng)電話(huà)或其他移動(dòng)產(chǎn)品設(shè)備）上閱讀和導(dǎo)航，同時(shí)減少縮放、平移和滾動(dòng)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（RWD）的元素

采用 RWD 設(shè)計(jì)的網(wǎng)站 使用 CSS3 Media queries，即一種對(duì) @media 規(guī)則的擴(kuò)展，以及流式的基于比例的網(wǎng)格和自適應(yīng)大小的圖像以適應(yīng)不同大小的設(shè)備。

<dl><dt>響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)</dt> <dd>自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（英語(yǔ)：Responsive web design，通常縮寫(xiě)為RWD）是一種網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)做法，該設(shè)計(jì)可使網(wǎng)站在多種瀏覽設(shè)備（從桌面電腦顯示器到移動(dòng)電話(huà)或其他移動(dòng)產(chǎn)品設(shè)備）上閱讀和導(dǎo)航，同時(shí)減少縮放、平移和滾動(dòng)。</dd> <dt>響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（RWD）的元素</dt> <dd>采用 RWD 設(shè)計(jì)的網(wǎng)站 使用 CSS3 Media queries，即一種對(duì) @media 規(guī)則的擴(kuò)展，以及流式的基于比例的網(wǎng)格和自適應(yīng)大小的圖像以適應(yīng)不同大小的設(shè)備。</dd> </dl>

表格?<table>

這里只是 normalize 以后的樣式，更多樣式查看?Table 組件。

?Copy 表格標(biāo)題表頭 #1表頭 #2表頭 #3

表頁(yè)腳 #1	表頁(yè)腳 #2	表頁(yè)腳 #3
數(shù)據(jù) #1	數(shù)據(jù) #2	數(shù)據(jù) #3
數(shù)據(jù) #1	數(shù)據(jù) #2	數(shù)據(jù) #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>	這是一個(gè)超鏈接
<em>	我在 em 元素里
<strong>	strong 元素，壯吧
<code>	行內(nèi)代碼
<del>	在我的胸口劃一刀
<ins>	強(qiáng)勢(shì)插入的元素
<mark>	我被貼上 mark 標(biāo)簽了
<q>	我在 q 元素里面?q 元素里面的 q元素?q 元素
<abbr>	響應(yīng)式設(shè)計(jì)縮寫(xiě)?RWD
<dfn>	定義一個(gè)東西?DLNA
<small>	我比別人小一些

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9006060.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。