html網頁設計字型設定方式

來源:酷知科普網 3.25W

我們在製作網頁的時候,如果使用單一的字型和格式,往往做出來的東西比較刻板,我們可以使用css設定一些字型格式,讓網頁更加美觀。

操作方法

(01)我們開啟webstorm軟體,在HTML檔案中建立h1到h6六個標籤,分別font-style設定字型風格,italic斜體,normal正常,oblique傾斜,inherit指繼承格式,revert還原字型風格。unset重置屬性。

html網頁設計字型設定方式
html網頁設計字型設定方式 第2張

(02)<br />文字換行顯示,我們在使用p標籤寫段落文字的時候,在網頁中設定換行但是在實際顯示的時候還是不會有換行的格式顯示,我們需要在文字中間加上<br />符號,設定換行。

html網頁設計字型設定方式 第3張
html網頁設計字型設定方式 第4張

(03)設定字型的粗細的情況我們可以使用font-weight然後選擇字型粗細,bold粗體,bolder稍粗,如圖所示,我們可以根據需要設定不同的字型粗細。

html網頁設計字型設定方式 第5張

(04)使用font-size設定字型大小,在css檔案上輸入font-size之後系統會自動顯示我們可以選擇的大小,large,larger等等,我們也可以直接輸入數字來定義字型的大小。

html網頁設計字型設定方式 第6張
html網頁設計字型設定方式 第7張

(05)font-family定義字型樣式,如楷體,黑體,宋體等等,這樣可以設定文字的顯示樣式,也可以在後面設定多種字型,作為備用字型。

html網頁設計字型設定方式 第8張
html網頁設計字型設定方式 第9張

(06)在輸入文字的時候,行與行之間的距離也可以自己定義,使用line-height定義一段文字的行高,這樣行與行之間的距離就可以拉開,設計出更好的顯示格式。

html網頁設計字型設定方式 第10張
熱門標籤