您当时的方位:主页 > 言语编程 > CSS

CSS入门教程——文字特点(font)

2014-10-22  

CSS文字特点(font特点)

font特点在CSS中的运用频率是适当高的。下面咱们就来看看font特点都能够做什么。

1.界说字体(font-family)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
p.song { font-family: "宋体"; }
p.hei { font-family: "黑体"; }
p.eng { font-family: Arial; }

-->
</style>
</head>
<body>
<p class="song">我的字体是宋体</p>
<p class="hei">我的字体是黑体</p>
<p class="eng">My font family is Arial.</p>
</body>
</html>

上面的网页分别为三个阶段界说了三种不同的字体。请留意中文的字体要运用引号,而英文字体则不需求。并且在实践使用中你或许遇到这样的问题:网站阅读者的manbet并没有你设置的字体。为了防止这种状况咱们能够界说备用字体,办法如下:

p { font-family: "黑体", "宋体", "新宋体"; }

这样,当客户的计算机中不存在黑体的时分,它就会今后面的备用字体显现文字。

2.界说文字巨细(font-size)

……
p.f12 { font-size: 12px; }
p.f16 { font-size: 16px; }
p.f20 { font-size: 20px; }

……
<p class="f12">我12像素</p>
<p class="f16"><span class="16">我16像素</span></p>
<p class="f20"><span class="20">我20像素</span></p>
……

留意不要忘掉写上巨细的单位,咱们这儿运用了像素(px)。一般主页的文字都界说为12px大。

3.界说文字款式(font-style)

……
p.ita { font-style: italic; }
……
<p>我是正常款式</p>
<p class="ita">我是斜体</p>
……

4.界说文字粗细(font-weigh)

……
p.b { font-weight: bold; }
……
<p>我是正常的字体。</p>
<p class="b">我是粗体</p>
……