CSSフォントスタイル
フォントスタイル
| 属性名 | 意味 | 例えば |
|---|---|---|
| フォントファミリー | フォントタイプを設定する | font-family： "公式スクリプト" |
| フォントサイズ | フォントサイズを設定する | font-size：12px |
| フォントスタイル | フォントスタイルを設定する | font-style：italic |
| フォントの太さ | フォントの太さを設定します | font-weight：bold |
| フォント | すべてのフォントプロパティを設定する | font：italic bold 36px "Arial" |
font-familyプロパティ
.p1{ font-family: "隶书";}
.p2{font-family: "黑体"; }
.p3{ font-family: "Arial Black"; }
サンプルコード：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-family: "隶书";}
.p2{
font-family: "黑体"; }
.p3{
font-family: "Arial Black"; }
</style>
<title></title>
</head>
<body>
<h1>不加修饰的一级标题</h1>
<h1 class="p1">一级标题隶书</h1>
<h1 class="p2">一级标题黑体</h1>
<h1 class="p3">一级标题Arial Black</h1>
</body>
</html>
効果のスクリーンショット：
font-size属性
単位：px（ピクセル）
.p1{font-size: 10px; }
.p2{font-size: 20px;}
.p3{font-size: 30px;}
サンプルコード：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-size: 10px; }
.p2{
font-size: 20px;}
.p3{
font-size: 30px;}
</style>
<title></title>
</head>
<body>
<h1>这是正常的一级标题</h1>
<h1 class="p1">这是10px的一级标题</h1>
<h1 class="p2">这是20px的一级标题</h1>
<h1 class="p3">这是30px的一级标题</h1>
</body>
</html>
効果のスクリーンショット：
フォントスタイル属性
通常、イタリック和斜め
.p1{font-style: normal; }
.p2{font-style: italic;}
.p3{font-style: oblique;}
サンプルコード：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-style: normal; }
.p2{
font-style: italic;}
.p3{
font-style: oblique;}
</style>
<title></title>
</head>
<body>
<h1>这是正常的一级标题</h1>
<h1 class="p1">这是normal的一级标题</h1>
<h1 class="p2">这是italic的一级标题</h1>
<h1 class="p3">这是oblique的一级标题</h1>
</body>
</html>
効果のスクリーンショット：
font-weight属性
normalデフォルト値は、標準フォントを定義します。
太字太字フォント。
.p1{font-weight: normal; }
.p2{font-weight: bold ;}
サンプルコード：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-weight: normal; }
.p2{
font-weight: bold ;}
</style>
<title></title>
</head>
<body>
<p>这是正常的字体</p>
<p class="p1">这是normal的字体</p>
<p class="p2">这是bold的字体</p>
</body>
</html>
効果のスクリーンショット：
フォント属性
フォント属性の順序：フォントスタイル→フォントの厚さ→フォントサイズ→フォントタイプ
.p1{font:oblique bold 12px "楷体"; }
サンプルコード：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font:oblique bold 12px "楷体"; }
</style>
<title></title>
</head>
<body>
<p>这是正常的字体</p>
<p class="p1">这是font:oblique bold 12px "楷体";的字体</p>
</body>
</html>
効果のスクリーンショット：
書くのは簡単ではありません。読んだ後、役に立ったら、応援よろしくお願いします！
コンピューターを使用している場合は、「1つの主要なトリプル接続「よろしいですか、右クリックしてください[笑]
いい加減にして！
共に働く！
Keafmd