体验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;
}
{
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>
<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>
<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>
h1,h2,h3,h4
{
font-family:"微软雅黑", "黑体", sans-serif;
font-weight:normal;
}
{
font-family:"微软雅黑", "黑体", sans-serif;
font-weight:normal;
}
可以看得出来黑体字体在没有抗锯齿的模式下是不适合用于网页作为标题字体的了。
体验css认为有以下几点原因使得在网页中使用黑体做标题,还不如微软雅黑,甚至不如宋体。『此项结果是在FF下测试得出来的』
1、笔划不均匀可以 仔细查看 推荐的“荐”字 “点”字,对比同样大小的字 “微软雅黑”表现比“黑体”强很多;
2、可以通过前面的图片对比,宋体笔划虽细,但是其美观程度比黑体还是要强;
3、平面设计中可以给黑体设置抗锯齿属性选项,而网页设计中却不能,这是“黑体”在网页设计中的硬伤。
4、另外就是前面所提到的,在IE下面小字号12px,14px黑体 显示效
发表评论
-
Oseicq是最好的可2次开发的即时通讯软件Oseicq即时通讯源码 .
2012-02-02 12:48 693Oseicq是最好的可2次开发的即时通讯软件,专 ... -
正则表达式在UBB论坛中的应用
2007-03-07 09:01 849一、读者指引 读者指引帮助你掌握本文的梗概。以免你看了大 ... -
!important和(空格)/**/:的组合技巧及其他
2007-03-07 09:06 692先温习一下对于IE的box-model的破解 IE box-m ... -
JS的IE和Firefox兼容性汇编
2007-03-07 09:08 536JS的IE和Firefox兼容性汇编(原作:hotman_x) ... -
javascript如何对中文字符进行url编码
2007-03-07 09:11 1149今天来点轻松得,这几天因做一个项目用到了对URL的编解码,就总 ... -
把应用程序从 Internet Explorer 迁移到 Mozilla
2007-03-07 09:49 1331级别: 初级 Doron Rosenberg (doronr@ ... -
用 CSS 实现的阴影效果
2007-03-08 10:08 1184阴影效果成了平面设计的一个套路,平面设计师把它当作瑞士军刀的起 ... -
一段折叠代码,带记忆功能的
2007-03-08 11:28 1126<script language="Java ... -
JavaScript中的私有成员
2007-03-10 08:16 712本文地址:http://www.nir ... -
共享一个ASP无组件折线图源码!强
2007-06-07 11:42 958我又来了,这几天我无意发现了一个地方有这个源码。当时下下来就没 ...
相关推荐
在网页中HTML专门用来负责网页的结构,所以在使用html标签时,应该关注的是标签的语义,而不是它的样式标题标签: h1 ~ h6 一共有六级标题 从h1~h6重要性递减,h1... 一般情况下标题标签只会使用到h1~h3,h4~h6很少用
[HTML][中文][初學]__06._文字標籤_h1~h6,_p_與_span
css如何去掉h1 h2 h3 h4加粗并统一字体大小.docx
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
我们还使用了元素来划分不同的内容区域,并使用<h1>、、、和等标签来添加标题、段落和列表。 在style.css文件中添加样式来美化我们的网页 大学生静态网页设计期末作业—HTML+CSS制作星巴克咖啡静态网页设计.zip 95...
div css样式表默认定制h1,h2,h3,h4,h5标题样式代码下载
对css里的元素如:html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, ...
h1标签的使用技巧
这个插件根据选定的目录内容中的 h1, h2, h3, h4, h5, h6 标签来自动生成目录插入到选定的目录容器中,并且提供一个漂亮的样式效果
长城哈弗H1蓝标汽车使用手册用户操作说明书pdf电子版下载
看过很多页面,很多人对H1的理解都不一样,个人有个人独到的创新想法,这样的答案也没有谁对谁错,就象大家每个人写CSS的习惯都不一样,不管怎么写最终是要达到设计稿的效果(这是最基本的要求).大家对xhtml的想法也有一大...
像所有的Zoom 录音机一样,H1自带的麦克风配置有X/Y模式来录制惊人的立体声。因为这两个麦克风都是在同一轴线上排列,它们到声源的距离是一样的,所以它们能完成美好的本地化,而没有相移。这样就可以录制出有纯真...
长城哈弗H1红标汽车使用手册用户操作说明书pdf电子版下载
在我的日常开发中,我最常用到的H1~H4。今天还是建议大家把H1~H6都用到。
问鹤分享:博客中h1h2h3和strong的用法
2022H1综艺网播表现及用户分析.pdf 2022H1综艺网播表现及用户分析.pdf 2022H1综艺网播表现及用户分析.pdf 2022H1综艺网播表现及用户分析.pdf 2022H1综艺网播表现及用户分析.pdf 2022H1综艺网播表现及用户分析.pdf ...
HASSELBLAD哈苏H1D使用说明书.pdf
本文实例讲述了jQuery实现获取h1-h6标题元素值的方法。分享给大家供大家参考,具体如下: 1、问题背景: 查找到h1-h6,并遍历它们,打印出内容 2、实现代码: <!DOCTYPE html> <html> <head> <...
<h1>欢迎来到我的博客</h1> </header> <nav> <ul> <li><a href="#home">主页</a></li> <li><a href="#articles">文章</a></li> <li><a href="#about">关于我</a></li> </ul> </nav> ...