网页设计中文标题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应用技巧 » 代码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测试用的代码
CODE:
<h2 class="f24">That quick brown fox jumps over the lazy dog.热点推荐热点推荐</h2>
如果还想参考其他结果，可以继续添加以下代码
CODE:
<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是如何出现的
设置字体列表
{
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>
FF下显示正常，Georgia中未找到的字符使用字体列表中的后备中文字体“微软雅黑”，而不是“宋体”
然后我们修改css代码，剔除Georgia字体
{
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毛钱也是钱了，呵呵。
网页设计中文标题h1~h4应用技巧相关推荐
- html表单输入的文本框的值,网页设计关于表单输入框的技巧代码
虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧. 1.使用, 2018-04-14 网页表格表框制作技巧. ---------------- ...
- 网页设计中 透明效果的使用技巧
运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在 ...
- 网页设计原则理念以及实战经验技巧
(2)界面弱化 一个好的界面设计它的界面是弱化的,它突出的是功能,着重体现的是网站业提供给使用者是主要什么.这就涉及到浏览顺序.功能分区等等. 要让访客在0.5秒内就能把握网站的行业性质,1秒内就知道 ...
- 网页设计排版的10个小技巧！
现在网页设计更加突出视觉效果,好的视觉设计,更容易让用户记住这个网站.也可以极大的提高公司的知名度,为公司带来收益,增强企业的服务能力.加强客户的参与度,可以让用户对于网站设计,提出合理意见的改进和优 ...
- 网页设计中文乱码问题
代码模块: <!DOCTYPE html> <html lang="en"> <head><title>Title</titl ...
- css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度 文章目录 html响应式网页设计:自动适应屏幕宽度 背景 一."自适应网页设计"的概念 二.允许网页宽度自动调整-使用meta标签:vie ...
- 高品质的网页设计: 实例与技巧
"高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你 ...
- Dreamweaver网页设计技巧
1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不 ...
- 生成网页没有标题_网页设计公司有哪些？用这个快速建站！
网站若想足够吸引人,一个吸睛美观的网页是不可或缺的.不过大多数企业和想要建站的个人都不懂设计知识,这种情况下,你就需要用到网页设计公司了.网页设计公司有哪些呢?国内外比较知名的有WordPress, ...
- UI设计优秀可临摹素材|网页设计头部技巧
头部内容设计的一些技巧. 1. 关于尺寸 对于网页头部图片的大小是没有统一的答案.有时候设计师希望提供相对固定的数字,但网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性.即使两个屏幕的尺寸相同,分 ...
最新文章
- 2022-2028年中国微滤膜行业市场发展调研及投资前景分析报告
- NOJ 20 吝啬的国度
- [python opencv 计算机视觉零基础到实战] 十三 直方图颜色提鲜
- 团队的英文翻译缩写_魔兽世界各种英文/拼音/缩写的翻译/解释
- 深入沟通的重要性——《大道至简》第四章读后感
- 【ACM】N皇后问题
- Java - Thinking in Java 第2章 一切都是对象
- 迁移潮来袭！数十个项目宣布即将停止支持 Python 2
- 苹果紧急修复三枚已遭在野利用的 iOS 0day
- sqlserver200864位下载_sql2008r2企业版下载-sql2008r2安装包64位 最新版 - 极光下载站...
- maya_Vray模型属性批量修改插件 v1.01 下载及教程
- php 验证码不正确,php验证码提示错误
- 解读数字孪生概念 —— 智慧城市大脑
- 马踏棋盘问题（C++版）
- PPT2010封装为exe教程
- 了解Socket吗？什么是socket？
- ARM状态寄存器-PSR
- openlayers加载gml
- 4.单片机之静态数码管和动态数码管
- 并发导致java对象错乱