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

14315 ワード

一、分類

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でのシンプルファクトリモード

を使用して簡単なチックタックトーゲームを作成する