typo.css中文網(wǎng)頁重設(shè)與排版
中文網(wǎng)頁重設(shè)與排版:
目標:一致化瀏覽器排版效果,構(gòu)建最適合中文閱讀的網(wǎng)頁排版。包括桌面和移動平臺。
Alpha 中,各路牛人都來支持一下,加入開發(fā)?。?/code>
預覽:typo.css
一、目錄結(jié)構(gòu)
.
├── README.md --- 使用幫助
├── TODO.md --- TODO-List
├── license.txt --- 許可證
├── typo.css --- 將應用于你的項目
└── typo.html --- Demo/預覽
二、TYPO.CSS 的設(shè)計和使用
建議看源代碼,特別是注釋,需要認真看。typo.css 主要包括:
1、一般 reset.css 所需的內(nèi)容
目前的設(shè)計是這樣的,盡量保持完整的 reset,比如讓 ul/ol 無樣式并且無多余的 padding/margin, 這是必須的,因為一個網(wǎng)可能需要很多自定義的的內(nèi)容,在實踐中我們并不希望像 ul/ol 有樣式,這樣我們得用優(yōu)先級去覆蓋,這是非常麻煩的事。所以 typo.css 并不像 normalize.css,后者給每一個元素都預先定義了樣式,這樣在自定義的時候?qū)⑹欠浅M纯嗟?。要大保持干凈的所有元素一致化?reset 才是最佳實踐。
為什么不是 Han 這個項目?
2、class="typo" 閱讀內(nèi)容排版
在文章/文檔閱讀的頁面,需添加 .typo 這個 class,這樣 table/ol/ul 等都會有預定的樣式,讓你的排版像 http://typo.sofish.de 一樣,讓用戶閱讀起來更舒服。
3、增加類:
主要是一些需要中文日常排版需要的元素和語文對應樣式的增強,目前包括:
(1) 專名號:使用標簽 或者 .typo-u
(2) 著重號:使用 class .typo-em
(3) 首字下沉:使用 class .typo-first
(4) 清理浮動:與一般 reset.css 保持一致 .clearfix
三、開源許可
Sofish Lin: founder, creator of Alice CSS, a code writter, a semi-designer.
Hotoo: developer, VIM guru, front-end web developer @ alipay.com
基于 MIT License 開源,使用代碼只需說明來源,或者引用 license.txt 即可。
