Web前端開發技術,CSS字體屬性介紹,提升前端小白能力

1、使用CSS屬性指定和改變字體外觀,常見的屬性有:

font-style: italic; 定義字體的風格

font-weight: bold; 定義字體粗細

font-size: 20px; 定義字體大小

line-height: 30px; 定義一段文字的行高

還可以使用簡寫形式,把所有屬性值放到font屬性中,如:

p {

 font: italic bold 20px/30px 微軟黑體;

}

2、Font-family 屬性可以設置文字字體樣式,比如常用的中文字體有:微軟雅黑,黑體,宋體等;常用的英文字體有:Verdana,arial,Times New Roman等。Font-family 後面可以定義一個字體,也可以定義一個字體列表。爲什麼需要使用字體列表呢?因爲我們無法控制用戶計算機上安裝什麼字體,不僅如此,往往操作系統也不一樣,比如在蘋果的Mac電腦上有的字體,在微軟的Windows上就不一定有,所以最好爲字體指定一個可選的字體列表。字體列表實際上就是一個字體有限列表,如下,第一個微軟雅黑是我希望使用的,瀏覽器會盡力加載這個字體,如果用戶電腦上沒有這個字體就使用第二個備用字體,依次類推,字體列表最後面應該制定一個通用字體系列。

p{

 font-family: 微軟雅黑, 黑體, Arial, Helvetica, sans-serif;

}

2、Font-family 屬性可以設置文字字體樣式,比如常用的中文字體有:微軟雅黑,黑體,宋體等;常用的英文字體有:Verdana,arial,Times New Roman等。Font-family 後面可以定義一個字體,也可以定義一個字體列表。爲什麼需要使用字體列表呢?因爲我們無法控制用戶計算機上安裝什麼字體,不僅如此,往往操作系統也不一樣,比如在蘋果的Mac電腦上有的字體,在微軟的Windows上就不一定有,所以最好爲字體指定一個可選的字體列表。字體列表實際上就是一個字體有限列表,如下,第一個微軟雅黑是我希望使用的,瀏覽器會盡力加載這個字體,如果用戶電腦上沒有這個字體就使用第二個備用字體,依次類推,字體列表最後面應該制定一個通用字體系列。

p{

 font-family: 微軟雅黑, 黑體, Arial, Helvetica, sans-serif;

}

3、什麼是通用字體系列?在CSS中定義了5個通用字體系列:

· Sans-serif字體系列:無襯線字體,筆畫粗細一致,在計算機屏幕上更容易閱讀

· Serif字體系列:有襯線字體,筆畫末端有裝飾性的線條或凸起,報紙正文中使用的字體

· Monospace字體系列:等寬字體,每個字母寬度一致,用於顯示軟件代碼示例

· Cursive字體系列:手寫體

· Fantasy字體系列:裝飾性字體,設計感較強

所以,候選字體列表中的字體通常來自於同一個字體系列,這樣當瀏覽器找不到優先定義的字體使用備用字體時,頁面展示的效果不會有太大的變化。如果前面指定的特定字體都沒有找到,瀏覽器就從sans-serif字體系列中找一個默認的字體。本次給大家推薦一個免費的學習蔻qun,前面603 中間985最後993,裏面概括應用網站開發,css,html,JavaScript,jQuery,VUE,Ajax,node,angular等。對web前端開發技術感興趣的同學,不管你是小白還是大牛我都歡迎,每天技術分享。

4、font-size 調整字體大小的方法有三種:

1)使用像素px,如:

在這裏插入圖片描述
注意:20和單位px之間不能有空格,文字的大小就是文字的最低部分和最高部分之間時20像素

2)使用%定義字體大小就是相對於父元素的字體大小,如:p標籤時body的子標籤,body定義的字體大小是20px,所以子標籤p的字體大小是父標籤的150%即30px。在這裏插入圖片描述
3)使用em調整字體大小,類似於百分數,也是一個相對的度量單位,使用em的時候要指定一個比例因子,p標籤是父標籤字體大小的1.2倍即24px。
在這裏插入圖片描述
5、font-weight 屬性可以改變字體的粗細,bold爲粗體,normal爲去掉粗體的樣式。
在這裏插入圖片描述
字體的粗細還有lighter爲稍細,bolder稍粗,或者使用數字100、200-900,但是這些都沒有得到字體和瀏覽器的廣泛支持,通常並不適用,瞭解即可。

6、font-style爲字體增加風格
在這裏插入圖片描述
有三個可能的值:normal(正常),italic(斜體字符),oblique(傾斜文本);其中italic是專門爲正常字體設計的斜體字符,oblique沒有專門的斜體字符,由瀏覽器負責把正常的字體傾斜顯示,因爲不是所有的字體定義了斜體字符,所以使用italic定義字體風格時,瀏覽器找不到這個字體的斜體字符,就通過oblique把正常的字體傾斜顯示,有時候看着是一樣的,有時候則不同,除非非要區分斜體和傾斜文本,不然可以選擇一種使用。

7、line-height 調整行高,定義一個盒子內每一行文字之間的距離。
在這裏插入圖片描述
每天進步一點點,跟着教頭學開發。

在成爲一個優秀的前端工程師的道路上,充滿了汗水和辛勞

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章