css常用樣式font設置字體的多種變換(實例詳解)

CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)font-family控制字體,由于各個電腦系統(tǒng)安裝的字體不盡相同,但是基本裝有黑體、宋體與微軟雅黑這三款字體,通常這樣寫font-family:"黑體", "宋體","Microsoft YaHei"
font-size控制字體大小,我們設置字體大小是設置它的寬度,它的高度一般電腦系統(tǒng)默認字體大小是16px,所以字體大小盡量不要低于16px,1em=16px; font-weight: bold;/*控制字重 一般是100-900 常用lighter(細體) normal(正常)bold加粗 */至于這個font-style,一般默認是normal,也就是正常的,如果說你設置 font-style: italic;斜體話,其實和這個<em></em>的效果是差不多的;文字間的間距用的line-height如果和高度相等話,就是垂直居中了。
通常font字體的簡寫:font:style weight size/line-heigt font-family /*要求必須出現(xiàn)的2個是 size與font-family*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css常用樣式font字體的多種變換</title> <style> div{ font-family: 'Microsoft YaHei';/*微軟雅黑*/ /* font-family: 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */ /*字體加上雙引號或者單引號,當有多個字體的時候,中間逗號分開*/ color:#f90; font-size: 24px;/*控制字體大小*/ font-weight: bold;/*控制字重 常用lighter(細體) normal(正常)bold加粗 */ font-style: italic;/*等同于em*/ line-height: 30px; } /*font字體的簡寫:font:style weight size/line-heigt font-family*/ /*要求必須出現(xiàn)的2個是 size font-family*/ p{ font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; letter-spacing: 1px;/*英文字母間距*/ word-spacing: 10px;/*英文單詞間距*/ } P::first-letter{ text-transform: capitalize; }/*第一個字母::first-letter*/ p::first-line{ color:red; }/*第一行::first-line*/ </style> </head> <body> <div>技術為王世界,欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界, 欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界, 欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好 </div> <p>Technology is king world, I want to ask if the scenery on the top of Qingtian Mountain is the king of technology, I want to ask whether the scenery of Qingtian Peak is the king of technology. If the technology is the king of the world, I would like to ask whether the scenery on the top of Qingtian Mountain is the king of the world. Is the scenery good?</p> </body> </html>
總結
以上所述是小編給大家介紹的css常用樣式font設置字體的多種變換,希望對大家有所幫助,也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
- 這篇文章主要介紹了css動畫效果之a(chǎn)nimation的常用樣式,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2020-08-11
- 下面小編就為大家?guī)硪黄獪\談html5標簽css3的常用樣式。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-20
- 下面小編就為大家?guī)硪黄猚ss 常用樣式(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-11
- 這里我總結了一下平時自己在項目中經(jīng)常用到的20個CSS常用的樣式,都是些個人的經(jīng)驗,這里分享給大家,希望對大家有所幫助2014-09-02
- CSS常用樣式包括定位、顯示、寬高和剪裁等屬性,這些都是我們大家經(jīng)常使用到的,在本文做個總結,以備不時之需2014-04-18
- 這篇文章主要介紹了CSS常用樣式之繪制雙箭頭的示例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-31