cssフォントの分類とスタイル

14315 ワード
CSS 先端

一、分類


Webページでフォントを5つに分類します.serif(ライニングフォント)sans-serif(非ライニングフォント)monospace(等幅フォント)cursive(スケッチフォント)fantasy(幻フォント)はフォントをこれらの大きな分類に設定できます.ブラウザは指定したフォントを自動的に選択し、スタイルを適用すると一般的にフォントを大きく分類します.font-familyの最後のフォントとして指定

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>     title>
	<style type="text/css">
		p{
			font-family: arial,     ,     , serif;
		}
	style>
head>
<body>
	<p style="font-size: 50px; font-family: serif;">    ：      ，ABCDEFGabcdefgp>
	<p style="font-size: 50px; font-family: sans-serif;">     ：      ，ABCDEFGabcdefgp>
	<p style="font-size: 50px; font-family: monospace;">    ：      ，ABCDEFGabcdefgp>
	<p style="font-size: 50px; font-family: cursive;">    ：      ，ABCDEFGabcdefgp>
	<p style="font-size: 50px; font-family: fantasy;">    ：      ，ABCDEFGabcdefgp>
body>
html>

二、様式


1:font-styleテキストの斜体を設定できます
  • オプション:normalのデフォルト値、テキストが正常にitalic文字を表示するとoblique文字が斜体で表示され、
    • が斜体で表示されます.
  • のほとんどのブラウザは、傾斜と斜体を区別しません.つまり、italicとobliqueの効果を設定するのは同じ
    • です.
  • 一般的にitalic
    • しか使用できません
    2:font-weightテキストの太さを設定できます
  • オプション値:normalデフォルト値、文字正常表示bold文字太字表示このスタイルは100-900の間の9つの値を指定することもできますが、ユーザーのコンピュータにはこのようなレベルのフォントがないことが多いため、200は100より太くなる可能性がありますが、同じ
    • である可能性もあります.
    3:font-variantは小型大文字を設定できます
  • オプション値:normalデフォルト値、テキストは通常small-capsテキストを小型大文字で表示小型大文字を表示します:すべてのアルファベットを大文字で表示しますが、小文字の小型大文字は大文字より
    • 小さいです.
    
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>       title>
	<style type="text/css">
		.p1{
			color: red;
			font-size: 30px;
			font-family:     ;
			font-style: italic;
			font-weight: bold;
			font-variant: small-caps;
		}

		.p2{
			/*        */
			font-size: 50px;
			/*      */
			font-family:     ;
			/*      */
			font-style: italic;
			/*      */
			font-weight: bold;
			/*          */
			font-variant: small-caps;
		}

		.p3{
			/*
			 CSS             font，                    
			             font   ，            
			  font       ，          ，      ，       ，          
			               ，             ，            
			                    
			*/
			font: bold italic small-caps 60px "    ";
		}
	style>
head>
<body>
	<p class="p1">      ，ABCDEFGabcdefgp>
	<p class="p2">      ，ABCDEFGabcdefgp>
	<p class="p3">      ，ABCDEFGabcdefgp>
body>
html>
    ASP.NETでのシンプルファクトリモード
    を使用して簡単なチックタックトーゲームを作成する