CSS学習シリーズ5:フォントスタイル

34629 ワード
html Web PHP css 職場 レジャー Javascript
HTMLの中のFONT要素はフォントの大きさ、フォント、色などのスタイルを設定することができる.B要素とStrong要素はいずれも文字を太字に設定することができる.I元素もEM元素も斜体とすることができる.
最も基本的なスタイル:
1つのフォント
HTMLではを使用して文字フォントを設定できますが、cssでフォントを設定するにはfont-familyが使用されます.構文コードは次のとおりです.
font-family:フォント名
font-family:フォント名1、フォント名2
font-family:fantasy|monospace|ncursive|serif|sans-serif
1.単一フォントの指定
フォントについてはfont-familyにフォント名を正しく入力すれば簡単です.
  

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3.   <head> 
    4. 
   
   
   
   
  4.     <title>    </title> 
    5. 
   
   
   
   
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    6. 
   
   
   
   
  6.   <link href="" type="text/css" rel="stylesheet"/> 
    7. 
   
   
   
   
  7.     <style type="text/css"> 
    8. 
   
   
   
   
  8.     <!-- 
    9. 
   
   
   
   
  9.        p.a{font-family:   ;} 
    10. 
   
   
   
   
  10.        p.b{font-family:   ;} 
    11. 
   
   
   
   
  11.        p.c{font-family: Mangal;} 
    12. 
   
   
   
   
  12.        p.d{font-family: "Broadway BT";} 
    13. 
   
   
   
   
  13.     --> 
    14. 
   
   
   
   
  14.     </style> 
    15. 
   
   
   
   
  15.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    16. 
   
   
   
   
  16.    </head> 
    17. 
   
   
   
   
  17.    <body> 
    18. 
   
   
   
   
  18.        <p class="a">  </p> 
    19. 
   
   
   
   
  19.        <p  class="b">  </p> 
    20. 
   
   
   
   
  20.        <p  class="c">ABCEDEFG</p> 
    21. 
   
   
   
   
  21.        <p class="d">ABCDEFGH</p> 
    22. 
   
   
   
   
  22.   </body> 
    23. 
   
   
   
   
  23.  
    24. 
   
   
   
   
  24. </html> 
    25.

2.オプションフォントの設定
cssでは、文字に複数のフォントを指定できます.各フォントはカンマで区切られています.一般的には、ブラウザは最初のフォントを使用して文字を表示します.最初のフォントが存在しない場合、ブラウザはすべてのフォントが存在しない場合に限り、2番目のフォントを表示しようとします.デフォルトのフォントを使用して表示されます.

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3.   <head> 
    4. 
   
   
   
   
  4.     <title>    </title> 
    5. 
   
   
   
   
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    6. 
   
   
   
   
  6.   <link href="" type="text/css" rel="stylesheet"/> 
    7. 
   
   
   
   
  7.     <style type="text/css"> 
    8. 
   
   
   
   
  8.     <!-- 
    9. 
   
   
   
   
  9.       p {font-family:     ,  ,    ;} 
    10. 
   
   
   
   
  10.     --> 
    11. 
   
   
   
   
  11.     </style> 
    12. 
   
   
   
   
  12.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    13. 
   
   
   
   
  13.    </head> 
    14. 
   
   
   
   
  14.    <body> 
    15. 
   
   
   
   
  15.        <P>    ,    ,  </P> 
    16. 
   
   
   
   
  16.   </body> 
    17. 
   
   
   
   
  17.  
    18. 
   
   
   
   
  18. </html> 
    19.

二:文字サイズ
cssで文字のサイズを設定するのに使用する属性はfont-sizeです.
構文コード:
font-size:xx-small‖x-small‖small‖medium‖large‖xx-large‖x-large‖larger‖長さ‖パーセント
1.絶対寸法
cssでは7種類の絶度フォントサイズを定義します
2.相対寸法
3.フォントサイズの調整
三太字
HTMLではを使って文字を太くしますが、どれだけ太くするかは開発者がコントロールできるものではありませんので、太くする程度を正確にコントロールするにはcssのfont-weight属性も使います
1.font-weightプロパティ
2.太字の表示方法
ししゃたい
HTMLではI要素とEM要素を用いる文字を傾けることができ、cssではfont-style属性を用いる文字を傾けることができる.
  

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3.   <head> 
    4. 
   
   
   
   
  4.     <title>    </title> 
    5. 
   
   
   
   
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    6. 
   
   
   
   
  6.   <link href="" type="text/css" rel="stylesheet"/> 
    7. 
   
   
   
   
  7.     <style type="text/css"> 
    8. 
   
   
   
   
  8.     <!-- 
    9. 
   
   
   
   
  9.      .a{font-style: italic;} 
    10. 
   
   
   
   
  10.      .b{font-style:normal;} 
    11. 
   
   
   
   
  11.     --> 
    12. 
   
   
   
   
  12.     </style> 
    13. 
   
   
   
   
  13.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    14. 
   
   
   
   
  14.    </head> 
    15. 
   
   
   
   
  15.    <body> 
    16. 
   
   
   
   
  16.        <P class="a"> Hello world</P> 
    17. 
   
   
   
   
  17.        <p class="b">Nice to Meet you</p> 
    18. 
   
   
   
   
  18.   </body> 
    19. 
   
   
   
   
  19.  
    20. 
   
   
   
   
  20.  
    21. 
   
   
   
   
  21. </html> 
    22.

五、フォント変形
フォントサイズ、太字、斜体に加えて、cssでは文字を変形することもできます.
1.小文字
font-variantプロパティを使用すると、英語のアルファベットを小さな大文字に変更できます.文法コードは次のとおりです.
font-variant:normal | small-caps
六、総合設置
fontの先頭のプロパティを使用すると、この場合cssでは比較的省略的な書き方ができます.
font: font-style || font-variant || font-weight ||  font-size || lint-height  || font-family
fontプロパティを使用してサブテキストスタイルを設定する
  

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3.   <head> 
    4. 
   
   
   
   
  4.     <title>    </title> 
    5. 
   
   
   
   
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    6. 
   
   
   
   
  6.   <link href="" type="text/css" rel="stylesheet"/> 
    7. 
   
   
   
   
  7.     <style type="text/css"> 
    8. 
   
   
   
   
  8.     <!-- 
    9. 
   
   
   
   
  9.      .a{font-style: italic;font-variant: small-caps;font-weight: bold;font-size: 20px;line-height: 120%;font-family:   ;} 
    10. 
   
   
   
   
  10.      .b{font:italic small-caps bold 20px /120%   ;} 
    11. 
   
   
   
   
  11.     --> 
    12. 
   
   
   
   
  12.     </style> 
    13. 
   
   
   
   
  13.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    14. 
   
   
   
   
  14.    </head> 
    15. 
   
   
   
   
  15.    <body> 
    16. 
   
   
   
   
  16.        <P> Hello world</P> 
    17. 
   
   
   
   
  17.        <p class="a">Nice to Meet you</p> 
    18. 
   
   
   
   
  18.        <p class="b">Good Bye</p> 
    19. 
   
   
   
   
  19.   </body> 
    20. 
   
   
   
   
  20.  
    21. 
   
   
   
   
  21. </html> 
    22.

七修飾
cssでは、文字に下線、下線を付けるなど、文字を少し修飾できます.
1.文字の修飾
cssでtext-decorationプロパティを使用してテキストプラグイン修飾子
八影
サブテキストのシャドウを設定すると、フォントがより立体的に見えます.サブシャドウのプロパティをtext-shadow、構文コードは:
text-shadow:none;  | color || lenght
九大書写変換
cssでのcssの大文字と小文字の処理はtext-transformプロパティによって行われ、構文コード
10ピッチ
cssでは、行間隔を含むテキストとテキストの距離を定義できます.
1.行間隔
  

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3.   <head> 
    4. 
   
   
   
   
  4.     <title>    </title> 
    5. 
   
   
   
   
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    6. 
   
   
   
   
  6.   <link href="" type="text/css" rel="stylesheet"/> 
    7. 
   
   
   
   
  7.     <style type="text/css"> 
    8. 
   
   
   
   
  8.     <!-- 
    9. 
   
   
   
   
  9.      .a{line-height: normal;} 
    10. 
   
   
   
   
  10.      .b{line-height: 1.5;} 
    11. 
   
   
   
   
  11.      .c{line-height: 25px;} 
    12. 
   
   
   
   
  12.      .d{line-height: 150%;} 
    13. 
   
   
   
   
  13.      .e{line-height: 0.5;} 
    14. 
   
   
   
   
  14.     
    15. 
   
   
   
   
  15.     --> 
    16. 
   
   
   
   
  16.     </style> 
    17. 
   
   
   
   
  17.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    18. 
   
   
   
   
  18.    </head> 
    19. 
   
   
   
   
  19.    <body> 
    20. 
   
   
   
   
  20.        <p class="a">Fir tiem i baby when i saw your face<br/> 
    21. 
   
   
   
   
  21.        Fir tiem i baby when i saw your face<br/> 
    22. 
   
   
   
   
  22.        Fir tiem i baby when i saw your face<br/></p> 
    23. 
   
   
   
   
  23.        <p class="b">Fir tiem i baby when i saw your face<br/> 
    24. 
   
   
   
   
  24.        Fir tiem i baby when i saw your face<br/> 
    25. 
   
   
   
   
  25.        Fir tiem i baby when i saw your face<br/></p> 
    26. 
   
   
   
   
  26.        <p class="c">Fir tiem i baby when i saw your face<br/> 
    27. 
   
   
   
   
  27.        Fir tiem i baby when i saw your face<br/> 
    28. 
   
   
   
   
  28.        Fir tiem i baby when i saw your face<br/></p> 
    29. 
   
   
   
   
  29.        <p class="d">Fir tiem i baby when i saw your face<br/> 
    30. 
   
   
   
   
  30.        Fir tiem i baby when i saw your face<br/> 
    31. 
   
   
   
   
  31.        Fir tiem i baby when i saw your face<br/></p> 
    32. 
   
   
   
   
  32.        <p class="e">Fir tiem i baby when i saw your face<br/> 
    33. 
   
   
   
   
  33.        Fir tiem i baby when i saw your face<br/> 
    34. 
   
   
   
   
  34.        Fir tiem i baby when i saw your face<br/> 
    35. 
   
   
   
   
  35.        </p> 
    36. 
   
   
   
   
  36.  
    37. 
   
   
   
   
  37.  
    38. 
   
   
   
   
  38.    
    39. 
   
   
   
   
  39.   </body> 
    40. 
   
   
   
   
  40.  
    41. 
   
   
   
   
  41. </html> 
    42.

2.文字間隔
cssではletter-spacingプロパティでサブフォント間隔を設定できます.英語では文字間隔はアルファベットごとの距離です中国語では文字間隔は文字ごとの距離です
  

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3.   <head> 
    4. 
   
   
   
   
  4.     <title>    </title> 
    5. 
   
   
   
   
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    6. 
   
   
   
   
  6.   <link href="" type="text/css" rel="stylesheet"/> 
    7. 
   
   
   
   
  7.     <style type="text/css"> 
    8. 
   
   
   
   
  8.     <!-- 
    9. 
   
   
   
   
  9.      .a{letter-spacing: normal;} 
    10. 
   
   
   
   
  10.      .b{letter-spacing: 2px;} 
    11. 
   
   
   
   
  11.      .c{letter-spacing: 10px;} 
    12. 
   
   
   
   
  12.     --> 
    13. 
   
   
   
   
  13.     </style> 
    14. 
   
   
   
   
  14.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    15. 
   
   
   
   
  15.    </head> 
    16. 
   
   
   
   
  16.    <body> 
    17. 
   
   
   
   
  17.        <p class="a">Fir tiem i baby when i saw your face<br/> 
    18. 
   
   
   
   
  18.             <br/> 
    19. 
   
   
   
   
  19.              <br/></p> 
    20. 
   
   
   
   
  20.        <p class="b">Fir tiem i baby when i saw your face<br/> 
    21. 
   
   
   
   
  21.               <br/> 
    22. 
   
   
   
   
  22.              <br/></p> 
    23. 
   
   
   
   
  23.        <p class="c">Fir tiem i baby when i saw your face<br/> 
    24. 
   
   
   
   
  24.            <br/> 
    25. 
   
   
   
   
  25.              <br/></p> 
    26. 
   
   
   
   
  26.  
    27. 
   
   
   
   
  27.        
    28. 
   
   
   
   
  28.  
    29. 
   
   
   
   
  29.    
    30. 
   
   
   
   
  30.   </body> 
    31. 
   
   
   
   
  31.  
    32. 
   
   
   
   
  32. </html> 
    33.

3.単語間隔
cssではword-spacingを使用して単語間隔を設定できます.単語間隔は英語の場合です.
easywechat微信開発SDKの小微商戸入金(一)
Funtoo LinuxでDMM.R18動画をFirefoxでストリーミング鑑賞