网页设计中文标题h1~h4应用技巧
2007-07-10 17:00
330 查看
体验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应用技巧 » 代码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应用技巧 » 代码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黑体 显示效果和 宋体是一模一样的。大号小号都派不上用场实在是败笔。
第三、让『文本文字』看起来更像『图片文字』，浏览器中如何开启文本抗锯齿模式
讲在前面：
1、宋体最小且清晰显示文本的字号为12px，笔划1px
2、宋体笔划有2px粗应该是12px的2倍，即24px。『cssxp个人看法毫无根据可言』
3、『文本文字』开启抗锯齿模式的分水岭是26px以上，譬如26px，28px，30px，32px等
4、网页标题文字不宜超过32px大小。以540px计算 540/32 = 16~17个标题文字。
5、网页中文文本字体大小无奇数之分，譬如13px，15px，17px等等。奇数一律转成偶数显示，可以自己调试。
6、网页中文字体应该是12px，14px，16px这样2px等比增长的了。
7、网页中的英文字体最小为9px，正文通常在9~11px小 12px~14px中 15px 16px大
体验css是如何证明“『文本文字』开启抗锯齿模式的分水岭是26px以上”？
1、看效果图 网页26px 24px正常宋体字 放大300% 即78px 72px
可以看的出来网页26px正常宋体启用了抗锯齿模式
同时可以对比 PS中26px正常宋体 无抗锯齿模式
2、在100%原图的状态下 网页26px正常宋体十分接近 PS中26px抗锯齿宋体，只不过不过笔划稍微细了一点
3、在300%放大图下，26px 加粗 宋体 在网页设计中和平面设计中不同的表现
网页标题 大字号（26px及以上）的中文字体加粗
同PS中 26px加粗平滑宋体 显示效果是一样的，抗锯齿模式
4、在100%原图的状态下
网页标题使用24px中文宋体加粗
与PS中 24px加粗平滑宋体 显示效果还是要差那么一点点。
足以可见24px是一个分水岭
cssxp.net 认为
1)、26px 宋体 正常 网页字体 启用了抗锯齿模式。
2)、24px 宋体 正常 网页字体并未启用抗锯齿模式。『同类比较，不同大小』
3)、26px 宋体 正常 无抗锯齿模式 平面设计字体也未开启抗锯齿模式 『不同类，同大小比较』
4)、26px 宋体 正常 平滑模式 平面设计字体比起 网页字体笔划更粗，更清晰。但相差不远
5)、26px 宋体 加粗 网页字体 启用了抗锯齿模式 且 与 26px 宋体 加粗 平滑 平面设计字体 显示的效果是一样的。
综上所述所以我认为网页字体开启抗锯齿模式，即显示为矢量字体，而不是点阵字体的分水岭为 24px | 26px。
『且加粗后，可以使得网页字体和平面设计字体相似99%』
以下为体验css测试用的代码
css代码不变，仅仅只修改了html代码
[Copy to clipboard] [ - ]
CODE:
<h2 class="f26">That quick brown fox jumps over the lazy dog.热点推荐热点推荐</h2>
<h2 class="f24">That quick brown fox jumps over the lazy dog.热点推荐热点推荐</h2>
如果还想参考其他结果，可以继续添加以下代码
[Copy to clipboard] [ - ]
CODE:
<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下字体属性 font-family的bug，『中英混排bug』
中英混排常识简介：
1、这属于排版知识
2、英文字母标点符号使用英文字体
3、中文字母中文标点使用中文字体
4、中英混排的时候，先设置英文字体，然后设置中文字体。
5、一般情况下中文字体包括了英文字体的所有字母和字符。
6、word indesign pagemake 方正飞腾 等排版软件都遵循复合字体设置的规则。『英文优先，中文其次』
7、一般来说中文字体有两个主要的系列：宋体系列，黑体系列。
8、英文字体分成衬线字体和非衬线字体。
9、复合字体，一般遵循这样的要求“衬线字体对应宋体系列 非衬线字体对应黑体系列。”
10、中文字体的细 正常 半粗 粗 超粗 对应英文字体 Light normal semi-bold bold black bold
这个bug是如何出现的
设置字体列表
h1,h2,h3,h4
{
font-family:Georgia, "微软雅黑", "宋体", sans-serif;
}
html代码还是跟第一个示例一样。
运行代码查看FF2及IE6下不同的效果
<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应用技巧 » 代码04</title>
<style type="text/css">...
h1,h2,h3,h4
{...}{
font-family:Georgia, "微软雅黑", "宋体", 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>
IE下可以看到前面的测试英文字体为Georgia 后面的中文却是系统默认字体“宋体”，而不是微软雅黑
FF下显示正常，Georgia中未找到的字符使用字体列表中的后备中文字体“微软雅黑”，而不是“宋体”
然后我们修改css代码，剔除Georgia字体
h1,h2,h3,h4
{
font-family:"微软雅黑", "宋体", sans-serif;
}
继续运行看一下，英文和中文都显示为“微软雅黑”，IE和FF下都相同。从支持复合字体的角度上来讲 FF比IE更强。
【正文内容完】
内容索引：
1、 h1~h4标题的大小
2、网页设计中『文本文字』 与 平面设计中『图片文字』大比拼
3、第三、让『文本文字』看起来更像『图片文字』，浏览器中如何开启文本抗锯齿模式
4、IE下的中英文本混排bug
常见问答（FAQ）
网友问：网页标题h1~h4设置什么样的中文字体更好看？
cssxp答：微软雅黑 > 宋体 > 黑体，黑体字体无抗锯齿模式实在是惨不忍睹
网友问问：网页标题h1~h4设置成什么大小最合适？
体验css答：16px以上，32px以下。（540px /32 = 16~17个字）
网友问：网页标题h1~h4是否要设置加粗？
html答：不用加粗，html默认font-weight:bold; 建议正文标题不要去掉加粗。布局中使用的标题可以不加粗（字体大小16px以下）
网友问：网页字体大小可以设置奇数大小么？
css答：可以设置奇数，但是效果和偶数没有什么差别，可以设置12px 13px 14px对比一下了。12px和14px的差别就很大。设置网页字体为了保险起见请使用偶数12 14 16 18 20 24 26.. 32 ...
最后cssxp留下一些思考练习题希望感兴趣的朋友可以尝试着去做一下：
1、另一种Italic样式要如何应用才能如同Bold加粗 得心应手？
2、黑体用于网页设计的灵活性与宋体的对比。（在IE下小字体黑体显示为宋体，FF下却不一样）四个不同：不同浏览器下、不同字号、不同样式、不同抗锯齿模式的表现。
3、“微软雅黑”在网页设计中什么情形下用来替换“宋体”更合适？
4、方正字库（宋体系列，黑体系列）与Arial Helvetica Myriad pro 等非衬线字体） Georgia Times 等（衬线字体） 如何组合排版看起来视觉效果更为统一？
本文主要讲述了四点技巧涉及了很多网页设计中的常识。很多地方未经考证，欢迎各位朋友指出文中的硬伤。体验css虚心接受，并及时修改。
本示例中很多出地方使用到了火狐浏览器，感兴趣的陌生朋友可以到http://www.cssxp.net/firefox.html 下载一个测试使用1毛钱也是钱了，呵呵。
原文转载：
http://blog.szrgb.net/szrgb/blog/showtitle.asp?thefiletitle=76
更多内容：http://www.szrgb.net
特效搜：http://sotx.szrgb.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应用技巧 » 代码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应用技巧 » 代码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黑体 显示效果和 宋体是一模一样的。大号小号都派不上用场实在是败笔。
第三、让『文本文字』看起来更像『图片文字』，浏览器中如何开启文本抗锯齿模式
讲在前面：
1、宋体最小且清晰显示文本的字号为12px，笔划1px
2、宋体笔划有2px粗应该是12px的2倍，即24px。『cssxp个人看法毫无根据可言』
3、『文本文字』开启抗锯齿模式的分水岭是26px以上，譬如26px，28px，30px，32px等
4、网页标题文字不宜超过32px大小。以540px计算 540/32 = 16~17个标题文字。
5、网页中文文本字体大小无奇数之分，譬如13px，15px，17px等等。奇数一律转成偶数显示，可以自己调试。
6、网页中文字体应该是12px，14px，16px这样2px等比增长的了。
7、网页中的英文字体最小为9px，正文通常在9~11px小 12px~14px中 15px 16px大
体验css是如何证明“『文本文字』开启抗锯齿模式的分水岭是26px以上”？
1、看效果图 网页26px 24px正常宋体字 放大300% 即78px 72px
可以看的出来网页26px正常宋体启用了抗锯齿模式
同时可以对比 PS中26px正常宋体 无抗锯齿模式
2、在100%原图的状态下 网页26px正常宋体十分接近 PS中26px抗锯齿宋体，只不过不过笔划稍微细了一点
3、在300%放大图下，26px 加粗 宋体 在网页设计中和平面设计中不同的表现
网页标题 大字号（26px及以上）的中文字体加粗
同PS中 26px加粗平滑宋体 显示效果是一样的，抗锯齿模式
4、在100%原图的状态下
网页标题使用24px中文宋体加粗
与PS中 24px加粗平滑宋体 显示效果还是要差那么一点点。
足以可见24px是一个分水岭
cssxp.net 认为
1)、26px 宋体 正常 网页字体 启用了抗锯齿模式。
2)、24px 宋体 正常 网页字体并未启用抗锯齿模式。『同类比较，不同大小』
3)、26px 宋体 正常 无抗锯齿模式 平面设计字体也未开启抗锯齿模式 『不同类，同大小比较』
4)、26px 宋体 正常 平滑模式 平面设计字体比起 网页字体笔划更粗，更清晰。但相差不远
5)、26px 宋体 加粗 网页字体 启用了抗锯齿模式 且 与 26px 宋体 加粗 平滑 平面设计字体 显示的效果是一样的。
综上所述所以我认为网页字体开启抗锯齿模式，即显示为矢量字体，而不是点阵字体的分水岭为 24px | 26px。
『且加粗后，可以使得网页字体和平面设计字体相似99%』
以下为体验css测试用的代码
css代码不变，仅仅只修改了html代码
[Copy to clipboard] [ - ]
CODE:
<h2 class="f26">That quick brown fox jumps over the lazy dog.热点推荐热点推荐</h2>
<h2 class="f24">That quick brown fox jumps over the lazy dog.热点推荐热点推荐</h2>
如果还想参考其他结果，可以继续添加以下代码
[Copy to clipboard] [ - ]
CODE:
<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下字体属性 font-family的bug，『中英混排bug』
中英混排常识简介：
1、这属于排版知识
2、英文字母标点符号使用英文字体
3、中文字母中文标点使用中文字体
4、中英混排的时候，先设置英文字体，然后设置中文字体。
5、一般情况下中文字体包括了英文字体的所有字母和字符。
6、word indesign pagemake 方正飞腾 等排版软件都遵循复合字体设置的规则。『英文优先，中文其次』
7、一般来说中文字体有两个主要的系列：宋体系列，黑体系列。
8、英文字体分成衬线字体和非衬线字体。
9、复合字体，一般遵循这样的要求“衬线字体对应宋体系列 非衬线字体对应黑体系列。”
10、中文字体的细 正常 半粗 粗 超粗 对应英文字体 Light normal semi-bold bold black bold
这个bug是如何出现的
设置字体列表
h1,h2,h3,h4
{
font-family:Georgia, "微软雅黑", "宋体", sans-serif;
}
html代码还是跟第一个示例一样。
运行代码查看FF2及IE6下不同的效果
<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应用技巧 » 代码04</title>
<style type="text/css">...
h1,h2,h3,h4
{...}{
font-family:Georgia, "微软雅黑", "宋体", 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>
IE下可以看到前面的测试英文字体为Georgia 后面的中文却是系统默认字体“宋体”，而不是微软雅黑
FF下显示正常，Georgia中未找到的字符使用字体列表中的后备中文字体“微软雅黑”，而不是“宋体”
然后我们修改css代码，剔除Georgia字体
h1,h2,h3,h4
{
font-family:"微软雅黑", "宋体", sans-serif;
}
继续运行看一下，英文和中文都显示为“微软雅黑”，IE和FF下都相同。从支持复合字体的角度上来讲 FF比IE更强。
【正文内容完】
内容索引：
1、 h1~h4标题的大小
2、网页设计中『文本文字』 与 平面设计中『图片文字』大比拼
3、第三、让『文本文字』看起来更像『图片文字』，浏览器中如何开启文本抗锯齿模式
4、IE下的中英文本混排bug
常见问答（FAQ）
网友问：网页标题h1~h4设置什么样的中文字体更好看？
cssxp答：微软雅黑 > 宋体 > 黑体，黑体字体无抗锯齿模式实在是惨不忍睹
网友问问：网页标题h1~h4设置成什么大小最合适？
体验css答：16px以上，32px以下。（540px /32 = 16~17个字）
网友问：网页标题h1~h4是否要设置加粗？
html答：不用加粗，html默认font-weight:bold; 建议正文标题不要去掉加粗。布局中使用的标题可以不加粗（字体大小16px以下）
网友问：网页字体大小可以设置奇数大小么？
css答：可以设置奇数，但是效果和偶数没有什么差别，可以设置12px 13px 14px对比一下了。12px和14px的差别就很大。设置网页字体为了保险起见请使用偶数12 14 16 18 20 24 26.. 32 ...
最后cssxp留下一些思考练习题希望感兴趣的朋友可以尝试着去做一下：
1、另一种Italic样式要如何应用才能如同Bold加粗 得心应手？
2、黑体用于网页设计的灵活性与宋体的对比。（在IE下小字体黑体显示为宋体，FF下却不一样）四个不同：不同浏览器下、不同字号、不同样式、不同抗锯齿模式的表现。
3、“微软雅黑”在网页设计中什么情形下用来替换“宋体”更合适？
4、方正字库（宋体系列，黑体系列）与Arial Helvetica Myriad pro 等非衬线字体） Georgia Times 等（衬线字体） 如何组合排版看起来视觉效果更为统一？
本文主要讲述了四点技巧涉及了很多网页设计中的常识。很多地方未经考证，欢迎各位朋友指出文中的硬伤。体验css虚心接受，并及时修改。
本示例中很多出地方使用到了火狐浏览器，感兴趣的陌生朋友可以到http://www.cssxp.net/firefox.html 下载一个测试使用1毛钱也是钱了，呵呵。
原文转载：
http://blog.szrgb.net/szrgb/blog/showtitle.asp?thefiletitle=76
更多内容：http://www.szrgb.net
特效搜：http://sotx.szrgb.net
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 转 网页设计中文字颜色的搭配技巧
- 网页设计中文字颜色的搭配技巧
- 网页设计中文字颜色的搭配技巧
- 网页设计中文字颜色的搭配技巧
- \t\t网页设计中文字颜色的搭配技巧
- 网页设计中文字颜色的搭配技巧
- 网页设计中文字颜色的搭配技巧
- 在网页设计中应用大照片作背景的52个优秀范例（上篇）
- 网页标题设计原则和规律
- 4个网页设计中经常用到的Photoshop技巧
- 经典网页设计：应用四边形的16个超酷的国外网站
- 设计网页的23条有用技巧
- 谈谈网页设计中的字体应用 (4) 实战应用篇·下
- js-网页设计技巧11则
- 网页设计关于表单输入框的技巧代码
- 网页文字应用CSS的一些技巧
- Android应用视觉效果设计技巧
- 网页设计中的“骨骼”运用技巧