前端常用css?字體1、使用CSS屬性指定和改變字體外觀，常見的屬性有：，我來為大家科普一下關于前端常用css?下面希望有你要的答案，我們一起來看看吧!

前端常用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; }

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

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

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

· Monospace字體系列：等寬字體，每個字母寬度一緻，用于顯示軟件代碼示例

· Cursive字體系列：手寫體

· Fantasy字體系列：裝飾性字體，設計感較強

所以，候選字體列表中的字體通常來自于同一個字體系列，這樣當浏覽器找不到優先定義的字體使用備用字體時，頁面展示的效果不會有太大的變化。如果前面指定的特定字體都沒有找到，浏覽器就從sans-serif字體系列中找一個默認的字體。

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 調整行高，定義一個盒子内每一行文字之間的距離。

字體行高

每天進步一點點，跟着教頭學開發。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!