`
lovelium
  • 浏览: 18875 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

设计模式CSSIEFirefoxXHTML 
阅读更多

体验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标题设置字体为“黑体”，在火狐浏览器下的抓图
Click here to open new window CTRL+Mouse wheel to zoom in/out

以下为代码演示
 
<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黑体 显示效
分享到：
| 共享一个仿阿里巴巴搜索效果,蛮漂亮的!
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用CSS定义标题的几个实例

    在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素呈现方式的语言，它使得我们可以对文本、图片、布局等进行详细的样式定义。在这个主题“用CSS定义标题的几个实例”中，我们将深入探讨如何使用...

    提取html中的h1-h6到excel

    例如，使用HtmlAgilityPack，我们可以编写以下代码片段来获取所有的h1-h6标题： ```csharp using HtmlAgilityPack; HtmlDocument doc = new HtmlDocument(); doc.Load("path_to_your_html_file.html"); foreach ...

    CSS在DIV网页排版中的实用技巧

    随着网络技术的发展，网页设计的需求也日益多样化，为了提高网页的设计质量，合理地使用CSS与DIV结合进行网页布局成为了一项重要的技能。以下是一些关于如何利用CSS在DIV网页排版中的实用技巧。 #### 1. 取消class...

    HTML网页制作

    在创建中国五大名山的网页时，我们可以使用`&lt;h1&gt;`到`&lt;h6&gt;`标签来设置各级标题，例如，用`&lt;h1&gt;`作为主标题“中国五大名山”，接着用`&lt;h2&gt;`分别介绍每座山的名字。在描述地理环境时，可以使用`&lt;p&gt;`标签添加段落，详细...

    自定义title样式

    在IT行业中，自定义标题样式是一项重要的网页设计和前端开发技术。标题是页面内容的精髓，它不仅影响用户的视觉体验，还对搜索引擎优化（SEO）起着关键作用。本篇文章将深入探讨如何自定义HTML标题样式，以适应不同...

    变幻之美DIV+CSS

    标题标签h1-h4在页面中的使用； ?定义列表dl的应用实例及组织页面元素的实例； ?有序列表ol的应用实例； ?CSS Sprites工作原理； ?制作图文混排的页面元素； ?通过修改CSS文件实现页面重构； ?在页面中插入...

    CSS的18个不可不知的技巧【css入门必读】

    h1, h2, h3, h4, h5, h6 { font-family: "Lucida Grande", Lucida, Arial, Helvetica, sans-serif; color: #333; } ``` #### 技巧九：响应式设计 随着移动设备的普及，响应式设计变得越来越重要。使用媒体查询...

    CSS的常用技巧放送

    #### 二、掌握CSS选择器的使用技巧 CSS选择器是编写样式表时不可或缺的一部分，它们帮助开发者定位文档中的元素并为其应用样式。 - **类选择器(class selectors)**：类选择器允许为一个或多个元素指定相同的样式。...

    几大搜索引擎的网站登录入口与SEO技巧.doc

    3. 页面元素：标题标签（）包含目标关键词，元描述标签描述页面内容，使用H1、H2标签强调关键词，图片ALT属性添加关键词描述。 4. 导入链接：获取高PageRank网站的导入链接，确保链接内容相关，锚文本多样化，避免...

    精彩编程与编程技巧-使用浏览器的文件复制对话框...

    ### 使用浏览器的文件复制对话框实现精彩编程与编程技巧 在现代软件开发中，利用操作系统提供的功能能够极大地提升用户体验，并简化应用程序的复杂性。本文将详细介绍如何使用浏览器中的文件复制对话框来增强应用的...

    css最常用和实用的技巧.docx

    【CSS最常用和实用的技巧】 1. **重置浏览器默认样式** 为了消除不同浏览器之间的...在实际开发中，还可以结合使用媒体查询、Flexbox或Grid布局来实现响应式设计，以及利用CSS预处理器（如Sass、Less）提高编写效率。

    初学CS的S总结CSS网页排版

    - **Flexbox** 和 **Grid**：这两种布局方式是现代网页设计中的强大工具，能够轻松地实现复杂的布局效果。 #### 7. 实战示例 假设我们需要创建一个简单的网页头部导航栏，可以使用以下HTML结构和CSS样式： ```html ...

    DIV+CSS布局技巧整理集合

    ### DIV+CSS布局技巧整理集合 #### 命名规范 在进行网页设计时，合理的命名不仅能够提高代码的可读性，还能帮助其他开发者...通过上述内容的学习，我们可以更好地理解和运用CSS布局技巧，提高网页设计的质量和效率。

    与选择器分组一样，声明分组也是一种便利.docx

    声明分组还有其他高级应用，例如使用`@media`查询进行响应式设计，或者在CSS预处理器（如Sass或Less）中利用嵌套规则和混合（mixins）来进一步提升代码的复用性。例如，在Sass中： ```scss @mixin header-style { ...

    隔行换色title样式

    在CSS（层叠样式表）领域，"隔行换色title样式"通常指的是在网页设计中，为了提高可读性和视觉效果，对表格或者列表进行的一种美化处理。具体来说，这种技术使得表格或列表的每一行交替显示不同的背景颜色，同时标题...

    精彩编程与编程技巧-如何清空回收站？...

    2. **Visual Basic (VB)**：一种面向对象的程序设计语言，因其简单易学而被广泛用于教学和快速开发应用。本案例使用的版本包括 VB6、VB5 和 VB4。 3. **回收站管理**：Windows 操作系统中的一个功能，用于存储用户...

    JS+CSS实现的一种符合用户体验的网页表单特效

    CSS 被广泛应用于美化网页布局和增强用户界面的互动性。本例中，通过精心设计的CSS规则，实现了表单元素的动态效果，提高了用户的使用体验。 - **统一元素样式**：定义全局样式以保持页面一致性，例如清除默认边距...

    CSS 隐藏代码大全

    在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素样式和布局的语言。在上述提供的“CSS隐藏代码大全”中，我们看到一系列的CSS规则，它们主要用于隐藏网页中特定部分，以达到定制化界面或者优化...

    精彩编程与编程技巧-用VB建立字符界面的控制台程序...

    根据给定的文件标题、描述、标签以及部分内容，本文将详细介绍如何使用Visual Basic（简称VB）来创建一个基于字符界面的控制台程序。这不仅包括基础的编程技巧，还涉及了高级的应用程序接口（API）调用技术。 ### ...

    css详细资料，适合初学者学习

    ### CSS基础教程：适合初学者的学习指南 #### CSS概述与基本语法 - **CSS**（Cascading Style ...随着实践的深入，开发者可以逐渐掌握更多高级技巧，如响应式设计、动画效果等，从而构建出美观且功能强大的网页界面。

Magicbox
Global site tag (gtag.js) - Google Analytics