网页设计中文标题h1~h4应用技巧

体验css提示您本教程适合初学者应用，高手还望见笑。欢迎来信[email=mailto:hero4u@163.com]hero4u@163.com[/email]探讨。转载请注明出处 体验css http://www.cssxp.net 原创作者：孤竹林

第一、h1~h4标题中的字体到底有多大？
讲在前面
1、html标签h1~h6 pre 七个标签 字体大小分别对应 xx-large  x-large large medium small x-small xx-small，即超大 很大 大 中 小 很小 超小 七个等级。
2、现在主流的浏览器IE，FF，Opera都是设置正文字体medium大小即16px。换一句话说就是medium=16px，16px=medium
3、一般来说large = 1.5 * medium 即 24px 同理 small= medium/1.5 约11px。高等级字号是下一级字号的1.5倍
4、实际应用来说这个倍数关系应该调整到1.2倍左右

正文开始先测量一下网页标题h1~h4的大小，见下图『FF下演示并抓图』

 具体大小自己测量或者目测估算一下了。
这里是代码演示

 

 

 

<! 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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 网页设计中文标题h1~h4应用技巧 &#187; 代码01 </ title >
< style  type ="text/css" > ...
/**//*h1,h2,h3,h4
{
 font-family:"微软雅黑", "宋体", sans-serif;
 font-weight:normal;
}*/
.f32 {...}{
 font-size:32px;
}
.f26 {...}{
 font-size:26px;
}
.f24 {...}{
 font-size:24px;
}
.f18 {...}{
 font-size:18px;
 color:#456cd0;
 font-weight:normal;
}
.f14 {...}{
 font-size:14px;
}
</ style >
</ head >
< body >
< h1 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h1 >
< h2 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h2 >
< h3 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h3 >
< h4 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h4 >
< h1  class ="f32" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h1 >
< h2  class ="f24" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h2 >
< h3  class ="f18" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h3 >
< h4  class ="f14" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h4 >
</ body >
</ html >

 

css代码

/*h1,h2,h3,h4
{
    font-family:"微软雅黑", "宋体", sans-serif;
    font-weight:normal;
}*/
.f32 {
    font-size:32px;
}
.f26 {
    font-size:26px;
}
.f24 {
    font-size:24px;
}
.f18 {
    font-size:18px;
    color:#456cd0;
    font-weight:normal;
}
.f14 {
       font-size:14px;
}

html代码

< h1 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h1 >
< h2 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h2 >
< h3 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h3 >
< h4 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h4 >
< h1  class ="f32" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h1 >
< h2  class ="f24" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h2 >
< h3  class ="f18" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h3 >
< h4  class ="f14" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h4 >

各位使用IE的朋友运行结果是不是跟下图一样呢？『IE下演示并抓图』


第二、网页设计中『文本文字』 与 平面设计中『图片文字』大比拼
对比同样字体大小下，网页中字体和PS中字体抗锯齿模式比较，见下图 『火狐浏览器及PS中演示并抓图』

此图缩放到了350%，即原图的3.5倍
从左到右从上到下分别是
18px 宋体 加粗 在网页中的表现 ||| 18px 宋体 加粗 在网页中的表现
18px 宋体 加粗 平滑在PS中的表现 ||| 18px 宋体 加粗 无抗锯齿模式在PS中的表现

这里是100%原图演示


体验css从以上两张图片看到的：
1、可以看出来缩放350%图中，网页中的字体没有使用抗锯齿模式，而是使用了点阵模式。
2、可以看到缩放350%的图中，PS中第一个使用了平滑抗锯齿模式，笔划放大后比较模糊，第二个加粗之后很难看
3、可以在100%原图中看到，网页中的18px 宋体加粗字体 笔划清晰，衬线不明显
4、可以看到100%原图中使用抗锯齿模式“平滑”的热点推荐也很清晰，笔划更细，衬线更为突出，而无抗锯齿模式却惨不忍睹

cssxp得到的结论：
1、网页设计中标题文字的使用『文本文字』 和 平面设计中标题文字的使用『图片文字』的效果是有很大的差别。
2、平面设计字体『图片文字』比网页设计字体『文本文字』好看的优势是在于 对矢量文本文字开启了抗锯齿模式

接下来再看文本字体未加粗情况下 网页设计字体和平面设计字体的表现。
300%放大图

100%原图


18px 宋体 正常 在网页中的表现 ||| 18px 宋体 正常 在网页中的表现
18px 宋体 正常 平滑在PS中的表现 ||| 18px 宋体 正常 无抗锯齿模式在PS中的表现
体验css从以上两张图片看到的：
1、18px 宋体 正常 “热点推荐”在网页和PS表现中是一样的。
2、18px 宋体 平滑 “热点推荐” 与 无抗锯齿模式的文本 相差很大
3、平滑的宋体，笔划瘦小更为孱弱，衬线也难看清楚。
cssxp得出的结论是：
1、未加粗的宋体不适合做标题
2、标题加粗后更现眼，容易识别
3、网页设计和平面设计中12px~24px 正常样式的宋体 字型都是一样的，且都是无抗锯齿模式。

新的观点：微软雅黑比宋体更适合做标题。

前情提要：之前讲解了h1~h4标签字体大小，以及平面设计字体『图片文字』与 网页设计字体『文本文字』差别在于抗锯齿模式
讲在前面：
目前最常见和常用的字体有以下几种
1、宋体 黑体 两种字体简体中文windows 100%有
2、微软雅黑，平面设计、网页设计、vista 用户都安装了该字体。
3、明體MingLiU 新明體PMingLiU  繁体中文用户100%有

在标题字体中的选择 体验css认为“微软雅黑”>“宋体”>"黑体"  简体中文 > 繁体中文
在小字号（12px~14px）情况下IE显示黑体和宋体是一样的。但是在Firefox下面黑体 字由于无抗锯齿支持，所以显得笔划很难看。

下图乃一张h1~h4标题设置字体为“微软雅黑”，在Firefox下的抓图


下图是一张h1~h4标题设置字体为“黑体”，在 火狐浏览器下的抓图


以下为代码演示

 

< DIV  class =msgheader > <! 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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 网页设计中文标题h1~h4应用技巧 &#187; 代码01 </ title >
< style  type ="text/css" > ...
h1,h2,h3,h4
{...}{
 font-family:"微软雅黑", "黑体", sans-serif;
 font-weight:normal;
}
.f32 {...}{
 font-size:32px;
}
.f26 {...}{
 font-size:26px;
}
.f24 {...}{
 font-size:24px;
}
.f18 {...}{
 font-size:18px;
 color:#456cd0;
 font-weight:normal;
}
.f14 {...}{
 font-size:14px;
}
</ style >
</ head >
< body >
< h1 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h1 >
< h2 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h2 >
< h3 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h3 >
< h4 > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h4 >
< h1  class ="f32" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h1 >
< h2  class ="f24" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h2 >
< h3  class ="f18" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h3 >
< h4  class ="f14" > That quick brown fox jumps over the lazy dog.热点推荐热点推荐 </ h4 >
</ body >
</ html ></ DIV >

css代码

h1,h2,h3,h4
{
    font-family:"微软雅黑", "黑体", sans-serif;
    font-weight:normal;
}

很简单就是设置“font-family:"微软雅黑", "黑体", sans-serif;” 一行就可以。

可以看得出来黑体字体在没有抗锯齿的模式下是不适合用于网页作为标题字体的了。

体验css认为有以下几点原因使得在网页中使用黑体做标题，还不如微软雅黑，甚至不如宋体。『此项结果是在FF下测试得出来的』
1、笔划不均匀可以  仔细查看 推荐的“荐”字 “点”字，对比同样大小的字 “微软雅黑”表现比“黑体”强很多；
2、可以通过前面的图片对比，宋体笔划虽细，但是其美观程度比黑体还是要强；
3、平面设计中可以给黑体设置抗锯齿属性选项，而网页设计中却不能，这是“黑体”在网页设计中的硬伤。
4、另外就是前面所提到的，在IE下面小字号12px，14px黑体 显示效