css常用スタイルfont制御フォントの多様な変換

12453 ワード

CSSフォント属性定義テキストのフォントシリーズ、サイズ、太字、スタイル(斜体など)と変形(小型大文字など)font-family制御フォントは、パソコンシステムごとにインストールされているフォントが異なるため、基本的に黒体、宋体とマイクロソフト雅黒の3つのフォントが搭載されており、通常はfont-family:「黒体」、「宋体」、「Microsoft YaHei」と書く
font-sizeはフォントサイズを制御し、フォントサイズを設定するのは幅を設定し、その高さは一般的にコンピュータシステムのデフォルトのフォントサイズは16 pxなので、フォントサイズはできるだけ16 pxを下回らないでください.1 em=16 pxです. font-weight: bold;/*制御ワードの重さは一般的に100-900でライト(細体)normal(正常)bold太字*/このfont-styleについては、一般的にデフォルトはnormal、つまり正常で、font-style:italicを設定するとします.斜体では、実はこれとの効果はあまり差がありません.文字間の間隔用のline-heightは高さと等しければ垂直に中央になります.
通常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>