对HTML页面中的文字进行全方位的设置
1、字体
在HTML语言中，文字的字体是通过<font face=“字体名称">来设置的
在CSS中字体则是通过font-family属性来控制的，该属性典型语句：
p{ font-family:黑体，Arial，宋体，sans-serif； }
整句代码告诉浏览器首先在浏览者的计算机中寻找黑体，如果该用户计算机中没有黑体，则接着寻找Arial字体，如果黑体与Arial都没有，再寻找宋体。如果font-family中所声明的所有字体都没有，则使用浏览器的默认字体显示。
font- family属性可以同时声明任意中字体，字体之间用逗号分隔开
一些字体的名称中间会出现空格，这需要用双引号将其引起来，如“Times New Roman”。
常见的“sans-serif”和“serif”不是单个字体的名称，而是一类字体的统称。按照W3C的规则，在font-family的最后都需要指定一个这样的字体集，当客户端没有指定字体时可以使用本机上的默认字体。
通常文章的正文使用的是易读性较强的serif字体，用户长时间阅读下不容易疲劳，而标题和表格则采用较醒目的sans-serif字体，它们需要显著和醒目，但不必长时间盯着这些文字来阅读。WEB设计及浏览器设置中推荐遵循此原则。
很多设计者喜欢使用各种各样的字体来给页面添彩，但这些字体在多数用户的机器上都没有安装，因此一定要设置多个备选字体，避免浏览器直接替换成默认的字体。最直接的方式是将使用了生僻字体的部分，用图形软件制作成小的图片，在加载到页面上。
<html> <head> <title>文字字体</title> <style type="text/css"> <!-- h2{ font-family:黑体，幼圆； } p{ font-family:Arial, Helvetica, sans-serif; } p.kaiti{ font-family:楷体_GB2312,"Times New Roman"; } --> </style> </head> <body> <h2>立春</h2> <p>自秦代以来，我国就一直以立春作为春季的开始。立春是从天文上来划分的，而在自然界、在人们的心目中，春是温暖，鸟语花香；春是生长，耕耘播种。在气候学中，春季是指候（5天为一候）平均气温10度至22度的时段。</p> <p class="kaiti">作者：isaac</p> </body> </html>
2、文字大小
在网页中通过文字的大小来突出主题是最平常的方法之一，CSS对于文字大小是通过font-size属性来具体控制的，而该属性的值可以是相对大小也可以是绝对大小。
例中一共设置了5种文字大小，使用的都是绝对单位，在任何分辨率的显示器下，显示出来的都是绝对的大小不会发生改变。
| 绝对单位 | 说明 |
| in | inch，英寸 |
| cm | centimeter，厘米 |
| mm | millimeter，毫米 |
| pt | point，印刷的点数，在一般的显示器中1pt相当于1/72inch |
| pc | Pica，1pc=12pt |
除了利用物理单位设定文字绝对大小的方法，CSS还提供了一些绝对大小的关键字，可作为font-size的值，关键字一共有7个。但这种方法在不同的浏览器中的显示效果却不一样，因此并不推荐使用。
<html> <head> <title>文字大小（绝对）</title> <style type="text/css"> <!-- p.inch{ font-size:0.5in;} /*物理单位*/ p.cm{ font-size:0.5cm; } p.mm{ font-size:4mm;} p.pt{ font-size:12pt;} p.pc{ font-size:2pc;} p.one{ font-size:xx-small;} /*关键字*/ p.two{ font-size:x-small;} p.three{ font-size:small;} p.four{ font-size:medium;} p.five{ font-size:large;} p.six{ font-size:x-large;} p.seven{ font-size:xx-large;} --> </style> </head> <body> <p class="inch">文字大小0.5in</p> <p class="cm">文字大小0.5cm</p> <p class="mm">文字大小4mm</p> <p class="pt">文字大小12pt</p> <p class="pc">文字大小2pc</p> <p class="one">文字大小xx-small</p> <p class="two">文字大小x-small</p> <p class="three">文字大小small</p> <p class="four">文字大小medium</p> <p class="five">文字大小large</p> <p class="six">文字大小x-large</p> <p class="seven">文字大小xx-large</p> </body> </html>
相对文字大小不像前面提到的绝对大小那样固定，绝对大小不随显示器和父标记的改变而改变。相对大小的设置比较灵活，因此一直受到很多网页制作者的青睐。
px：表示具体的像素，因此其显示大小与显示器的大小及其分辨率有关。
%或者em：都是相对于父标记而言的比例，如果没有设定父标记的字体大小，则相对于浏览器的默认值。
<html> <head> <title>文字大小（相对）</title> <style type="text/css"> <!-- p.one{ font-size:15px;} /*像素，因此实际显示大小与分辨率有关，很常用的方式*/ p.one span{ font-size:200%; } /*在父标记的基础上乘以200%*/ p.two{ font-size:30px;} p.two span{ font-size:0.5em;} /*在父标记的基础上乘以0.5*/ --> </style> </head> <body> <p class="one">文字大小<span>相对值</span>,15px。</p> <p class="two">文字大小<span>相对值</span>,30px。</p> </body> </html>
3、文字颜色
在CSS种文字颜色是通过color属性设置的。如下
h3{ color:blue;} h3{color:#00f;} h3{color:#0000ff;} h3{color:rgb(0,0,255);} h3{color:rgb(0%,0%,100%);}
在设置某一个段落文字的颜色时，通常可以利用<span>标记，将需要的部分进行单独标注，然后再设置<span>标记的颜色属性。
<html> <head> <title>文字颜色</title> <style type="text/css"> <!-- h2{ color:rgb(%0,0%,80%); } p{ color:#333333; font-size:13px; } p span{ color:blue; } --> </style> </head> <body> <h2> 冬至的由来 </h2> <p><span>冬至</span>过节源于汉代，盛于唐宋，相沿至今。《清嘉录》甚至有“<span>冬至</span>大如年”之说。这表明古人对<span>冬至</span>十分重视</p> </body> </html>
4、文字粗细
在HTML语言中可以通过添加<p>标记或者<strong>标记将文字设置为粗体。在CSS中可以将文字的粗细进行细致的划分，更重要的是CSS还可以将本身是粗体的文字变为正常粗细。
文字的粗细在CSS中是通过属性font-weight来设置的
例中涵盖了所有的文字粗细值，并且在标题处通过设置<span>标记的样式，使得本身是粗体的“粗”字变成了正常粗细。
<html> <head> <title>文字粗体</title> <style type="text/css"> <!-- h1 span{ font-weight:lighter;} span{ font-size:30px;} span.one{ font-weight:100;} span.two{ font-weight:200;} span.three{ font-weight:300;} span.four{ font-weight:400;} span.five{ font-weight:500;} span.six{ font-weight:600;} span.seven{font-weight:700;} span.eight{ font-weight:800;} span.nine{ font-weight:900;} span.ten{ font-weight:bold;} span.eleven{ font-weight:normal;} --> </style> </head> <body> <h1>文字<span>粗</span>体</h1> <span class="one">文字粗细:100</span> <span class="two">文字粗细:200</span> <span class="threee">文字粗细:300</span> <span class="four">文字粗细:400</span> <span class="five">文字粗细:500</span> <span class="six">文字粗细:600</span> <span class="seven">文字粗细:700</span> <span class="eight">文字粗细:800</span> <span class="nine">文字粗细:900</span> <span class="ten">文字粗细:bold</span> <span class="eleven">文字粗细:normal</span> </body> </html>
5、斜体
在CSS中斜体字是通过设置font-style属性来实现的。
例设置文字的样式为斜体，并加入<span>标记，将本身已经变成斜体的文字又设置成了标准风格。
<html> <head> <title>文字斜体</title> <style type="text/css"> <!-- h1{ font-style:italic;} h1 span{ font-style:normal;} p{ font-size:18px;} p.one{ font-style:italic;} p.two{ font-style:oblique;} --> </style> </head> <body> <h1>文字<span>斜</span>体</h1> <p class="one">文字斜体</p> <p class="two">文字斜体</p> </body> </html>
6、文字的下划线、顶划线和删除线
给文字加上下划线、顶划线和删除线在文档编辑中的使用频率是很高的，在网页中尤其的突出。CSS通过设置文字的text-decoration 属性来实现。
有时候如果希望文字不仅有下划线，同时还有顶划线或者删除线，这时可以将underline 和overline的值同时赋给text-decoration,并用空格分开。
<html> <head> <title>文字下划线、顶划线、删除线</title> <style type="text/css"> <!-- p.one{ text-decoration:underline;} /*下划线*/ p.two{ text-decoration:overline;} /*顶划线*/ p.three{ text-decoration:line-through;} /*删除线*/ p.four{ text-decoration:blink;} /*闪烁*/ p.five{ text-decoration:underline overline line-through;} /* 同时使用下划线 顶划线 删除线 */ --> </style> </head> <body> <p class="one">下划线文字</p> <p class="two">顶划线文字</p> <p class="three">删除线文字</p> <p class="four">文字闪烁</p> <p class="five">正常文字</p> <p>正常文字对比</p> </body> </html>
7、英文字母大小写
英文字母大小写转换是CSS提供的很实用的功能之一，用户只需要设定英文段落的text-transform属性，就能很轻松地实现大小写的转换。
<html> <head> <title>英文字母大小写</title> <style type="text/css"> <!-- p{ font-size:17px;} p.one{ text-transform:capitalize;} /*单词首字大写*/ p.two{ text-transform:uppercase;} /*全部大写*/ p.three{ text-transform:lowercase;} /*全部小写*/ --> </style> </head> <body> <p class="one">quick brown fox jumps over the lazy dog.</p> <p class="two">quick brown fox jumps over the lazy dog.</p> <p class="three">QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</p> </body> </html>
