对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>