css控制行間距

2021-04-26 00:50:44 字數 1372 閱讀 5913

字型的選用要考慮該文字的用途,是做標題呢,還是段落文字?

通常來說 san serif 字型適合作為標題使用,例如 arial;serif 字型適合作為段落文字使用,例如time new roman。對於網頁設計來說,有幾個字型是我強烈推薦的,verdana, tahoma, ge***ia。事實上,像 verdana 這個字型是由世界上頂級的字型設計師花了差不多兩年時間設計出來的,microsoft負責買單, 然後免費提供給使用者,這個字型是ie安裝的一部分,如果你安裝了ie 4以上的版本,你的電腦裡就一定有這個字型,所以你不必擔心使用者是否有這個字型。它的設計考慮了字型在螢幕上顯示的可能面對的問題,而且提供了近乎完美的答案。唯一的麻煩是它的近乎完美造成了我們使用的時候沒有了個性,因為每個人都使用它。

二、字型大小的大小

論壇裡很多討論,關於pixle 好還是point好? 我就不重複了,在這裡我想提出的是字型大小的大小在css裡,有很多不同的單位,大致上有三類,

絕對大小:mm, cm, in, pt, pc

相對大小:em, ex

相對於裝置:px

可能要多說幾句的是 em 和 ex,em 在 css 裡代表就是字型字型大小的大小,例如對於12 pt的字型來說, 1 em 就等於12 pt 範例:

p 也許你會說我可以用text-indent: 10pt來實現同樣的效果啊,但那只是在理想的情形下,如果使用者覺得他的瀏覽器設定字型大小為14pt更好的時候,你所設計的比例就失去了,所以相對尺寸對於網頁的可伸縮性設計是非常有利的。

ex 和 em 類似,但不盡相同, 回到上面的圖示,x-height 對於每一種字型來說是不同的,ex 是根據字型的 x-height 來定義字型的大小。

三、對齊方式

最好使用左對齊,尤其要避免使用左右對齊,除非你有乙個特殊的設計目的,左對齊時右側的不對齊正是為了閱讀的方便,右側的變化對你的視力是乙個幫助,它借助變化告訴你的眼睛可以換行了。

四、行間距

行間距取決於字型的大小,一般來說,小的字型大小需要大一點的行間距來便於閱讀,中文字型在網頁上如果沒有行間距的設定,對於閱讀大段文字來說是讀者的災難,所以適當設定line-height是非常必要的。一般地,line-height在網頁設計中應該是字型大小的1.5倍到2倍。word 和其它的文字編輯軟體裡, 一般設定字型的120%作為預設的行間距。css裡的 line- height 設定,是均分後加在每一行的上下,也就是說,如果 line-height 設定為 20px 的話,那麼每一行文字的上下各有10px的間距。

五、字間距和字元間距很特殊的用途,對中文來說這兩者應該是相同的。這個設定的本身就是為了解決某些字型設計上缺陷,來增加文字的可讀性。

網頁段落行間距控制

本文主要講解如何用css控制網頁段落行間距的三個例項 1 使用百分比設定行間距,2 使用畫素值設定行間距,3 使用數值來設定行間距。1 使用百分比設定行間距 本例演示如何使用百分比值來設定段落中的行間距。這是擁有標準行高的段落。在大多數瀏覽器中預設行高大約是 110 到 120 這是擁有標準行高的段...

前端學習 Css 行間距

在css並沒有為我們提供乙個直接設定行間距的方式,我們只能通過設定行高來間接的設定行間距,行高越大行間距越大。使用line height來設定行高 行高類似於我們上學單線本,單線本是一行一行,線與線之間的距離就是行高,網頁中的文字實際上也是寫在乙個看不見的線中的,而文字會預設在行高中垂直居中顯示。行...

css行間距字間距首字縮排

1.line height設定行間距 html 行間距的設定方法與問題 我們可以用 來設定一段文字內的行距.但我們怎麼設定兩段文字之間的行距呢?即 1 p 一段文字 2 p 第二段文字 之間的行距怎麼設定呢?我可以設成單倍間距嗎?另外,line height 100 是不是就是我們在word中的單倍...