◤css教程_字体属性--▃▄ 龙 人 网 络 ▄▃.htm
来自「web开发离不开css层叠样式表。此书言简意赅介绍了css技术。最常用的、最简洁」· HTM 代码 · 共 210 行
HTM
210 行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0039)http://www.rr365.net/edu-css/css104.htm -->
<HTML><HEAD><TITLE>◤CSS教程.字体属性--▃▄ 龙 人 网 络 ▄▃</TITLE>
<META http-equiv=Content-Language content=zh-cn>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="CSS教程,CSS技巧 " name=keywords>
<META
content=网页制作教程:asp教程,ASP.net教程,XML教程,PHP教程,FrontpageXP教程,DreamWeaverMX教程,JSP教程,JavaScript教程,VBScript教程,CSS教程,FrontpageXP,DreamWeaverMX,JSP,JavaScript,VBScript,CSS,asp,ASP.net,XML,PHP相关技巧及资源
name=description><LINK href="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/style.css"
type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.2604" name=GENERATOR></HEAD>
<BODY language=Javascript1.2
onmouseover="window.status='欢迎光临【龙人网站】www.rr365.net,专业服务全为您!!!';return true"
onclick=dynOutline() ;>
<TABLE id=table1 width="100%">
<TBODY>
<TR>
<TD background="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/logo4.gif" colSpan=8
height=30> </TD></TR>
<TR>
<TD width=195 height=53><A href="http://www.rr365.net/index.htm"><IMG
height=53 alt=网站优化，网站排名 src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/logo-up.gif"
width=195 border=0></A></TD>
<TD colSpan=7>
<H1 align=center>网页制作教程：CSS教程</H1></TD></TR>
<TR>
<TD background="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/logo-bt.gif" height=31>
<P align=center><A
href="http://www.rr365.net/edu-webdesign/index.htm"><FONT
color=#000000>网页制作教程</FONT></A></P></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/index.htm">首 页</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/web-promotion.htm">网站推广</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webrestruction.htm">网站优化</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/agent/emarketing.htm">轻松代理</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webhosting.htm">虚拟主机</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/vpp/domain.htm">域名注册</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webdesign.htm">网站建设</A></B></TD></TR></TBODY></TABLE>
<TABLE id=table2 width="100%">
<TBODY>
<TR>
<TD bgColor=#00ccff colSpan=2 height=10> </TD></TR>
<TR>
<TD vAlign=top width="23%" bgColor=#e5ecf9 rowSpan=5>
<P><IMG height=25 src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/logo6.gif"
width=25 border=0> <B><A href="http://www.rr365.net/edu-css/css.htm"><FONT
color=#ff0000>CSS教程</FONT></A></B></P>
<UL style="FONT-SIZE: 10pt; LINE-HEIGHT: 13pt">
<LI><A href="http://www.rr365.net/edu-css/css.htm">认识CSS</A>
<LI><A href="http://www.rr365.net/edu-css/css102.htm">语法</A>
<LI><A href="http://www.rr365.net/edu-css/css103.htm">伪类—动态链接</A>
<LI><A href="http://www.rr365.net/edu-css/css104.htm">CSS属性</A>
<LI><A href="http://www.rr365.net/edu-css/css105.htm">CSS定位</A>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css106.htm">滤镜</A> </P>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css107.htm">CSS结合JS的运用</A> </P>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css108.htm">如何在网页中插入CSS</A>
</P></LI></UL>
<P><IMG height=25 src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/logo411.gif"
width=25 border=0> <FONT color=#000000><B><A
href="http://www.rr365.net/edu-css/css2.htm"><FONT
color=#008080>CSS技巧</FONT></A></B></FONT></P>
<P><IMG height=25 src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/logo411.gif"
width=25 border=0> <FONT color=#008080><B>CSS相关网站</B></FONT></P>
<UL style="FONT-SIZE: 10pt; LINE-HEIGHT: 13pt">
<LI><A href="http://www.w3.org/Style/CSS/" target=_blank>W3C之CSS规范</A>
<LI><A href="http://www.w3schools.com/css/default.asp" target=_blank>CSS
Tutorial</A> </LI></UL>
<P><IMG height=25 src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/logo411.gif"
width=25 border=0> <B><FONT color=#000000><A
href="http://www.rr365.net/edu-css/css4.htm"><FONT
color=#008080>CSS相关软件</FONT></A></FONT></B></P>
<P> </P> </TD>
<TD width="77%">
<UL type=square>
<LI>
<P align=left><U><B><FONT size=4>CSS教程.CSS属性</FONT></B></U></P>
<DIV align=center>
<TABLE id=table4 cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=p2 vAlign=top>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt">
从CSS的基本语句就可以看出，属性是CSS非常重要的部分。熟练掌握了<A
href="http://www.rr365.net/edu-css/css.htm"><FONT
color=#000000>CSS</FONT></A>的各种属性将会是您编辑页面更加得心应手。下面我们就借助一些实例来讲解。
</SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> <B><FONT color=#336633>1、
字体属性</FONT></B> </SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 这是最基本的属性，您经常都会用到。它主要包括以下这些属性：
</SPAN></P>
<P align=center><SPAN style="FONT-SIZE: 11pt"><IMG height=135
alt=字体属性 src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/css056.gif"
width=493 border=0 orig_onmouseout="null"
orig_onmouseover="null"></SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 光看表格是不是有些难懂，不要紧，我们来看一个用表格中的属性定义的字体样式（如下图）：
</SPAN></P>
<P align=center><SPAN style="FONT-SIZE: 11pt"><IMG height=184
alt=不同样式的字体 src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/css003.gif"
width=119 border=0 orig_onmouseout="null"
orig_onmouseover="null"> </SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 第一行只是采用了“font-family”属性，代码是这样的：
<BR> <FONT color=#006666><p style=“font-family：lucida
console”>hongen</p></FONT> <BR> 这行代码定义了“hongen”将以“lucida
console”的字体显示；
<BR> 第二行font-family为默认值，而是定义了“font-style”属性为“italic”斜体，代码如下：
<BR> <FONT color=#006666><p
style=“font-style：italic”>hongen</p></FONT>
<BR> 第三行font-family为默认值，font-style为“oblique”，另外还定义了“font-weight”属性为“bold”，“font-size”属性为24pt（缺省情况下为absolute
size绝对大小）代码如下：<BR> <FONT color=#006666><p
style=“font-style：oblique；font-weight：bold；font-size：24pt”>hongen</p></FONT>
<BR> 最后一行只是在第三行定义的基础上又增添了“font-variant”属性为“small-caps”（小体大写），代码如下：
<BR> <FONT color=#006666><p
style=“font-style：oblique；font-weight：bold；font-size：24pt； font-variant：small-caps”>hongen</p></FONT><FONT
color=#ff0066>
</FONT><BR> 值得注意的是：“font-variant”属性值“small-caps”在指定的小体大写字体不存在的时候，CSS将用大写字母代替所有的小写字母。
<BR> 可能您会问：定义一个字体怎么有那么长的代码呢？其实字体属性中还一个“font”属性，可以实现简便定义。我们来看下面这段代码：<BR> <FONT
color=#006666><p style=“font：italic small-caps bold
36pt,GlitzyCurl”>Leaf</p></FONT>
此代码产生的效果是这样的（如下图）：</SPAN></P>
<P align=center><SPAN style="FONT-SIZE: 11pt"><IMG height=62
alt=leaf字体1 src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/css004.gif"
width=188 border=0 orig_onmouseout="null"
orig_onmouseover="null"></SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 这段代码定义了“leaf”的字体为GlitzyCurl，并且是斜体、小体大写、粗体、36号字。这段代码等同于：
<BR> <FONT color=#006666><p
style=“font-style：italic；font-variant：small-caps；font-weight： bold；font-size：36pt；font-family：GiltzyCurl”>Leaf</p></FONT>
<BR> 怎么样，是不是精简了许多。
<BR> 但需要注意的是：如果您用<font>属性直接定义，一定要注意属性值的排放顺序。 它的排放规则是按照“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”的顺序，其中没有定义的以默认值显示。
</SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 其实我们习惯上还是不用FONT属性来统一定义，因为分开来定义的代码虽然很长，但是看上去很直观，让人一看就知道定义的内容是什么。
<BR> 说一点遗憾之处吧，就是CSS对中文字体的支持可能不是很好。
</SPAN></P></TD></TR></TBODY></TABLE></DIV><BR><BR></LI></UL></TD></TR>
<TR>
<TD>
<P
align=center>
<A href="http://www.rr365.net/edu-css/css103.htm">上一节</A>|<A
href="http://www.rr365.net/edu-css/css104b.htm">下一节</A></P></TD></TR>
<TR>
<TD>
<HR width="75%" color=#e5ecf9>
<P align=center>网页教程: <A
href="http://www.rr365.net/edu-asp/index.htm">ASP</A>| <A
href="http://www.rr365.net/edu-asp-net/asp-net.htm">ASP.net</A>| <A
href="http://www.rr365.net/edu-xml/xml.htm">XML</A>| <A
href="http://www.rr365.net/edu-php/php.htm">PHP4</A> | <A
href="http://www.rr365.net/edu-frontpage/frontpage.htm">FrontpageXP</A> |
<A
href="http://www.rr365.net/edu-dreamweaver/dreamweaver.htm">DreamWeaverMX</A></P>
<P
align=center>
<A href="http://www.rr365.net/edu-cplus/c.htm">C#</A>| <A
href="http://www.rr365.net/edu-jsp/jsp.htm">JSP</A> | <A
href="http://www.rr365.net/edu-javascript/javascript.htm">JavaScript</A> |
<A href="http://www.rr365.net/edu-vbscript/vbscript.htm">VBScript</A> | <A
href="http://www.rr365.net/edu-css/css.htm">CSS</A></P></TD></TR>
<TR>
<TD>
<HR width="50%" color=#e5ecf9>
<P> </P></TD></TR>
<TR>
<TD>
<FORM name=query0 action=http://www1.baidu.com/baidu method=get
target=_blank>
<DIV align=center><INPUT type=hidden value=baidu name=tn0> <A
href="http://www.baidu.com/"><IMG alt=Baidu
src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/baidu_logo.gif" align=bottom
border=0></A> <INPUT size=15 name=word0> <IFRAME border=0 name=I1
marginWidth=0 marginHeight=0
src="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/help1.htm" frameBorder=no width=0
scrolling=no height=0></IFRAME><INPUT type=submit value=百度搜索>
</DIV></FORM> </TD></TR></TBODY></TABLE>
<TABLE id=table3 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: 1px solid" borderColor=#00ccff height=21> </TD></TR>
<TR>
<TD background="◤CSS教程_字体属性--▃▄ 龙 人 网 络 ▄▃.files/tdbg.gif"
bgColor=#e5ecf9><P align=center><B><A
href="http://www.rr365.net/summary/aboutus.htm">关于我们</A>-<A
href="http://www.rr365.net/summary/paymethod.htm">付款方式</A>-<A
href="http://www.rr365.net/helpcenter/helpcenter.htm">帮助中心</A>-<A
href="http://www.rr365.net/agent/agent.htm">轻松代理</A>-<A
href="http://www.rr365.net/sitemap.htm">网站地图</A>-<A
href="mailto:support@rr365.net">联系我们</A></B></P></TD></TR></TBODY></TABLE></BODY></HTML>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?