讀書筆記 CSS禪意花園 文字排印

2021-06-22 11:37:06 字數 1514 閱讀 2522

文字是內容的核心,所以對於文字的排印是至關重要的,這一篇主要介紹文字排印對於網頁中文字的處理技術。

先講一下文字排印的一些基礎

在選擇字型時一定要在最後加上備用字型這一項,因為不同的系統有不同的支援(通用的是serif,cuisive用於手寫字型,fantasy用於裝飾字型);在色相和對比度的選擇上(在排印上色相不是單指色彩的色相,而是文字所處環境下整體的基調)

,慣用的是白底黑字,很多設計師都下意識的的選擇純藍來增加對比度,但是用不顯眼的褐色的字型卻可以起到清晰、柔和的效果,不同字型大小、粗細、顏色的字型都可以起到增強對比度的效果。

對於字型大小,瀏覽器預設是16px,但是對於很多使用者來說是偏大的,而且使用者可以在檢視裡調節所以應該合理的設定字型,這裡提供幾種合理的方法:

1、使用em單位;2、使用關鍵字;3、切換樣式表;

文字的視覺效果,有兩種方法:1、使用符號文字;2、使用引力線,用來引導使用者的視線;

保證使用者正確理解文字表達傳遞的資訊,避免產生理解上問題的方法:

標題文字:

1、標題的顏色必須是整個設計中較為強勢的顏色;

2、標題的顏色必須鮮明;(研究表明亮色的影響不如暗色,所以越是接近黑色的標題越是可以給使用者帶來視覺衝擊力)

3、字型對比可以增強標題效果;

4、相對正常的70%~90%的緊縮效果可以凸顯標題;

5、控制標題的長度,過長會讓使用者難以理解;

而且標題的符號不應該出現句號。

正文文字:1、

應該避免每行的字元過少,

保持一行60個字元以內;(這個是設計師應該牢牢記住的規則) 2、

段落不應該太長,如果是長篇文字就分為節,然後用標題隔開,但是段落之間不要隔離太遠,容易打斷使用者;

3、正文應該避免使用鮮豔的色彩,唯一的色彩變化應該用在正文的鏈結上;

重要文字,一般來說重要文字是指側欄、引用或說明部分的文字:

1、文字必須色彩鮮明,但是重要文字的色彩一定要統一;

2、應該要短行,不應該阻斷正文;

3、為插圖附有相關說明;(可用title屬性)

重要文字應該和插圖一樣絕對不能擾亂使用者的視覺流向。

字型格式化選項分為文字樣式和字間樣式:

文字樣式有css屬性的font-variant,用於字型變形;text-transform用於字元大小變換;text-decoration用於裝飾字型,這個要記住一點下劃線也就是underline只在鏈結中用,下劃線代表鏈結已經成為了共識。

字間樣式有css屬性的line-height用於控制兩行文字間距,

段落排版text-align、字型排版word-spacing、字元排版letter-space,letter-space屬性最好只在小段文字或者標題裡使用;

雖然在設計中乙個思路是追求極限,但是就實用來講要追求平衡

慢慢 V6 03 2 讀書筆記 css文字

主要改變的是以下屬性 文字的顏色 字元間距,對齊文字,裝飾文字,對文字進行縮排以及文字轉換。文字對齊的屬性可以設定為 根據以上屬性,text align的屬性可以類似的設定為 兩端對齊是指設定文字內容兩端,調整文字的水平間距,使其均勻分布在左右頁邊距之間。就類似兩行文字硬生生的首尾呼應的意思吧。條目...

css揭秘讀書筆記

currentcolor屬性讓hr和段落相同的顏色 div hr p裡面的hr標籤不變色 background origin padding box是背景的預設原點,background position right 10px bottom 10px 可以讓偏移,如果不支援這個屬性,可以這樣back...

《CSS世界》讀書筆記

css三無準則 無寬度 充分利用流特性 無浮動 無 無寬度與寬度分離分離準則相通 瀏覽器相容 區別 ie8僅支援單冒號的偽元素 如 element before 常用清楚浮動方式 清楚浮動 clearfix.clearfix after 需求 頁面某模組的文字內容是動態的,希望文字少的時候居中顯示,...