css字體、文本相關

css字體、文本相關

一、字體樣式

  • 字體顏色

    設置字體顏色,使用color來設置字體顏色
    設置文字大小,使用font-size設置,瀏覽器中一般默認的文字大小都是16px
    設置文字的字體,通過font-family可以指定文字的字體,當採用某種字體時,如果瀏覽器支持則使用該字體,如果字體不支持,則使用默認字體,該樣式可以同時指定多個字體,多個字體之間使用,分開,當採用多個字體時,瀏覽器會優先使用前邊的字體,如果前邊沒有在嘗試下一個。瀏覽器使用的字體默認就是計算機中的字體,如果計算機中有,則使用,如果沒有就不用。
    

二、字體分類

  • 在網頁中將字體分成5大類:

    serif(襯線字體)
    sans-serif(非襯線字體)
    monospace (等寬字體)
    cursive (草書字體)
    fantasy (虛幻字體)
    

    可以將字體設置爲這些大的分類,當設置爲大的分類以後,瀏覽器會自動選擇指定的字體並應用樣式,一般會將字體的大分類,指定爲font-family中的最後一個字體 。

三、字體的其他樣式

  • font-style可以用來設置文字的斜體

    可選值:
    normal,默認值,文字正常顯示。
    italic 文字會以斜體顯示。
    oblique 文字會以傾斜的效果顯示。
    大部分瀏覽器都不會對傾斜和斜體做區分,一般我們只會使用italic。
    
  • font-weight可以用來設置文本的加粗效果:

    可選值:
    normal,默認值,文字正常顯示。
    bold,文字加粗顯示。
    
  • font-variant可以用來設置小型大寫字母

    可選值:
    normal,默認值,文字正常顯示。
    small-caps 文本以小型大寫字母顯示。
    
  • font同時設置字體相關的所有樣式

    可以將字體的樣式的值,統一寫在font樣式中,不同的值之間使用空格隔開。
    使用font設置字體樣式時,斜體 加粗 小大字母,沒有順序要求,甚至可寫可不寫。
    如果不寫則使用默認值,但是要求文字的大小和字體必須寫,而且字體必須是最後一個樣式。
    大小必須是倒數第二個樣式。
    

四、行間距

  • line-height來設置行高

    在CSS並沒有爲我們提供一個直接設置行間距的方式。
    我們只能通過設置行高來間接的設置行間距,行高越大行間距越大。
    行間距 = 行高 - 字體大小。
    
  • line-height可選值

    1.直接就收一個大小。
    2.可以指定一個百分數,則會相對於字體去計算行高。
    3.可以直接傳一個數值,則行高會設置字體大小相應的倍數。
    4.在font中也可以指定行高,在字體大小後可以添加/行高,來指定行高,該值是可選的,如果不指定則會使用默認值。
    

五、文本樣式

  • text-transform可以用來設置文本的大小寫

    可選值:
    none 默認值,該怎麼顯示就怎麼顯示,不做任何處理。
    capitalize 單詞的首字母大寫,通過空格來識別單詞。
    uppercase 所有的字母都大寫。
    lowercase 所有的字母都小寫。
    
  • text-decoration可以用來設置文本的修飾

    可選值:
    none:默認值,不添加任何修飾,正常顯示。
    underline 爲文本添加下劃線。
    overline 爲文本添加上劃線。
    line-through 爲文本添加刪除線。
    ps:如果需要去除超鏈接的下劃線則需要將該樣式設置爲none。
    
  • letter-spacing可以指定字符間距

    word-spacing可以設置單詞之間的距離。
    實際上就是設置詞與詞之間空格的大小。
    
  • text-align用於設置文本的對齊方式

    可選值:
    left 默認值,文本靠左對齊。
    right , 文本靠右對齊。
    center , 文本居中對齊。
    justify , 兩端對齊。
    
  • text-indent用來設置首行縮進

    當給它指定一個正值時,會自動向右側縮進指定的像素。
    如果爲它指定一個負值,則會向左移動指定的像素。
    通過這種方式可以將一些不想顯示的文字隱藏起來。
    這個值一般都會使用em作爲單位。
    
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章