《CSS教程》04章字体的设定

本章讲述字体颜色的设置

文字颜色的指定

color: 颜色值

s04_01.htm

【CSS】
.type1 {
    color: #009999;
    background: #ffffff
}
.type2 {
    color: #cccc00;
    background: #ffffff
}
.type3 {
    color: #ff9900;
    background: #ffffff
}

【HTML】
<p class="type1">指定的颜色为［#009999］</p>
<p class="type2">指定的颜色为［#cccc00］</p>
<p class="type3">指定的颜色为［#ff9900］</p>

字体的设定

font-family: 字体名1, 字体名2, ....
注: 英语和日语的对应。　　本节的例子为日语
    .serif          明朝系(例:Time New Roman, MS P明朝)
    .sans-serif     ゴシック系(例:Helvetica, MS Pゴシック, Osaka)
    .cursive        草书体.笔记体系(例:Caflisch Script, Adobe Poetica)
    .fantasy        装饰字体(例:Critter, Cottonwood)
    .monospace      等幅字体(例:MS ゴシック, Osaka)

s04_02.htm

【CSS】
h1 { font-family: Impact, sans-serif }
p { font-size: x-large }
.min { font-family: "MS P明朝",平成明朝,serif }
.gth { font-family: "MS Pゴシック",Osaka,sans-serif }
.com { font-family: "Comic Sans MS",sans-serif }

【HTML】
<h1>font-family</h1>
<p class="min">这个部分被设为明朝</p>
<p class="gth">这个部分被设为MS Pゴシック</p>
<p class="com">Comic Sans MS</p>

字体大小的指定

font-size: 大小值
大小值可以设置为：带计量单位的数值，％，
small,larger,xx-small,x-small,small,medium,large,x-large,xx-large

s04_03.htm

【CSS】
.xxs { font-size: xx-small }
.xs  { font-size: x-small }
.s   { font-size: small }
.m   { font-size: medium }
.l   { font-size: large }
.xl  { font-size: x-large }
.xxl { font-size: xx-large }
.smaller { font-size: smaller }
.larger  { font-size: larger }
.s09 { font-size: 9pt }
.s12 { font-size: 12pt }
.s16 { font-size: 16pt }
.p080 { font-size: 80% }
.p120 { font-size: 120% }
.p150 { font-size: 150% }
em {
  color: #ff3300;
  background-color: #ffffff;
  font-style: normal
}

【HTML】
<p>这行文字的大小为<em>默认值(medium)</em>。</p>
<ul>
<li class="xxs"><em>xx-small</em> 大小的文字</li>
<li class="xs"><em>x-small</em> 大小的文字</li>
<li class="s"><em>small</em> 大小的文字</li>
<li class="m"><em>medium</em> 大小的文字</li>
<li class="l"><em>large</em> 大小的文字</li>
<li class="xl"><em>x-large</em> 大小的文字</li>
<li class="xxl"><em>xx-large</em> 大小的文字</li>
</ul>
<p>
<span class="smaller">这是<em>smaller</em></span>，
<span class="m">这是<em>medium</em></span>，
<span class="larger">这是<em>larger</em></span>。
</p>
<p>
<span class="s09">这是<em>9Point</em></span>，
<span class="s12">这是<em>12Point</em></span>，
<span class="s16">这是<em>16Point</em></span>。
</p>
<p>
<span class="p080">这是<em>80%</em></span>，
这是<em>100%</em>，
<span class="p120">这是<em>120%</em></span>，
<span class="p150">这是<em>150%</em></span>。
</p>

字体粗细(重量)的设定

font-weight: 粗细(重量)
粗细可以设置为：nomal, bold, lighter, bolder
                100, 200, 300, 400, 500, 600, 700, 800, 900

s04_04.htm

【CSS】
ul {
  font-size: xx-large;
  font-family: "Times New Roman", Times, serif
}
#bold { font-weight: bold }
#w400 { font-weight: 400 }
#w500 { font-weight: 500 }
#w600 { font-weight: 600 }
#w700 { font-weight: 700 }
#w800 { font-weight: 800 }
#w900 { font-weight: 900 }
em {
  color: #ff3300;
  background-color: #ffffff;
  font-style: normal
}

【HTML】
<ul>
<li>font-weight: <em>normal</em></li>
<li id="bold">font-weight: <em>bold</em></li>
<li id="w400">font-weight: <em>400</em></li>
<li id="w500">font-weight: <em>500</em></li>
<li id="w600">font-weight: <em>600</em></li>
<li id="w700">font-weight: <em>700</em></li>
<li id="w800">font-weight: <em>800</em></li>
<li id="w900">font-weight: <em>900</em></li>
</ul>

字体的修饰

font-style: 斜体        ◆nomal, italic, oblique
text-decoretion: 装饰   ◆none, underline, overline, line-through, blink

s04_05.htm

【CSS】
p {
  font-size: x-large;
  font-family: "Times New Roman", Times, serif
}
#itlc { font-style: italic }
#oblq { font-style: oblique }
#udln { text-decoration: underline }
#lnth { text-decoration: line-through }
#ovln { text-decoration: overline }
#udov { text-decoration: underline overline }
.keywd {
  color: #ff3300;
  background-color: #ffffff
}

【HTML】
<p>
font-style: <span class="keywd">normal</span>
</p>
<p id="itlc">
font-style: <span class="keywd">italic</span>
</p>
<p id="oblq">
font-style: <span class="keywd">oblique</span>
</p>
<p>
text-decoration: <span class="keywd">none</span>
</p>
<p id="udln">
text-decoration: <span class="keywd">underline</span>
</p>
<p id="lnth">
text-decoration: <span class="keywd">line-through</span>
</p>
<p id="ovln">
text-decoration: <span class="keywd">overline</span>
</p>
<p id="udov">
text-decoration: <span class="keywd">underline overline</span>
</p>

字体的一次性设定

font: 斜体，粗细，大小／行间距，字体名　　　◆行间距是下一章的内容

s04_06.htm

【CSS】
body {
  margin: 0;
  color: #ffffff;
  background: #009900 url(back.jpg)
}
h1, h2 {
  text-align: center;
  margin: 0
}
h1 {
  font: italic bold 6em "Times New Roman",Times,serif
}
h2 {
  font: 1.5em Arial,sans-serif;
  color: #ff9900;
  background: transparent
}
p {
  font: 12pt/200% "楷体,serif;
  margin: 1em 2em;
  padding: 1em;
  color: #ffffff;
  background: #000000
}

【HTML】
<h1>-font-</h1>
<h2>[ shorthand font property ]</h2>
<p>
利用这个属性可以将字体的多项属性一次性地设定。
</p>

《CSS教程》04章 字体的设定

《CSS教程》04章字体的设定