您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關css常用樣式font設置字體多種變換的案例,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)font-family控制字體,由于各個電腦系統安裝的字體不盡相同,但是基本裝有黑體、宋體與微軟雅黑這三款字體,通常這樣寫font-family:"黑體", "宋體","Microsoft YaHei"
font-size控制字體大小,我們設置字體大小是設置它的寬度,它的高度一般電腦系統默認字體大小是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 /*要求必須出現的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*/ /*要求必須出現的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設置字體多種變換的案例”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。