css經常使用樣式font控制字體的多種變換

時間 2020-02-15

標籤 css 經常使用樣式 font 控制字體多種變換欄目 CSS 简体版

原文原文鏈接

CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）font-family控制字體，因爲各個電腦系統安裝的字體不盡相同，可是基本裝有黑體、宋體與微軟雅黑這三款字體，一般這樣寫font-family:"黑體", "宋體","Microsoft YaHei"css

font-size控制字體大小，咱們設置字體大小是設置它的寬度，它的高度通常電腦系統默認字體大小是16px，因此字體大小盡可能不要低於16px，1em=16px； font-weight: bold;/*控制字重通常是100-900 經常使用lighter(細體) normal（正常）bold加粗 */至於這個font-style，通常默認是normal，也就是正常的，若是說你設置 font-style: italic;斜體話，其實和這個<em></em>的效果是差很少的;文字間的間距用的line-height若是和高度相等話，就是垂直居中了。html

一般font字體的簡寫:font:style weight size/line-heigt font-family /*要求必須出現的2個是 size與font-family*/

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>css經常使用樣式font字體的多種變換</title>
 7     <style>
 8         div{
 9             font-family: 'Microsoft YaHei';/*微軟雅黑*/
10             /* font-family: 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
11             /*字體加上雙引號或者單引號，當有多個字體的時候，中間逗號分開*/
12             color:#f90;
13             font-size: 24px;/*控制字體大小*/
14             font-weight: bold;/*控制字重 經常使用lighter(細體) normal（正常）bold加粗 */
15             font-style: italic;/*等同於em*/
16             line-height: 30px;
17         }
18         /*font字體的簡寫:font:style weight size/line-heigt font-family*/
19         /*要求必須出現的2個是 size font-family*/
20         p{  
21             font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
22             letter-spacing: 1px;/*英文字母間距*/
23             word-spacing: 10px;/*英文單詞間距*/
24         }
25         P::first-letter{
26             text-transform: capitalize;
27         }/*第一個字母::first-letter*/
28         p::first-line{
29             color:red;
30         }/*第一行::first-line*/
31     </style>
32 </head>
33 <body>
34     <div>技術爲王世界,欲問青天山頂景色是否獨好技術爲王世界,欲問青天山頂景色是否獨好技術爲王世界,欲問青天山頂景色是否獨好技術爲王世界,
35         欲問青天山頂景色是否獨好技術爲王世界,欲問青天山頂景色是否獨好技術爲王世界,欲問青天山頂景色是否獨好技術爲王世界,
36         欲問青天山頂景色是否獨好技術爲王世界,欲問青天山頂景色是否獨好 </div>
37     <p>Technology is king world, I want to ask if the scenery on the top of Qingtian Mountain is the king of technology, 
38         I want to ask whether the scenery of Qingtian Peak is the king of technology. If the technology is the king of the world, 
39         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>
40 </body>
41 </html>