文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | 免费看大片 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络学院网站建设经验技巧网页制作技巧:空格的宽度
精品推荐
特别推荐
·ADSL登录是错误,出现691是什么意思
·网站建设中的常用代码
·Web搜索引擎设计和实现分析
·网页心得:网页色彩的搭配
·网页颜色搭配的技巧
·网站上传方法汇总
·最大限度优化博客文章
·基本的页面设计元素布局比例
·网站策划书实例
·应用网页标准制作网站的几点好处
·网页设计心得:页面布局的简单规则
·注意:网页标题和网页Meta的写法
·网管员在日常维护局域网时的几点注意事项
·常用网页使用js技巧收集(200多个)
·WEB开发碰到的问题及经验十八则
·网页设计文字大小相关的四种设置方法
·怎样制作网页?
·谈论做网站的理念与技术
·“口碑营销”的关键问题是在效率
·网页制作,改变你的思维方式
热点TOP10
·jsp Smart Upload上传下载全攻略
·制作网站的步骤和方法
·常用网页使用js技巧收集(200多个)
·知道对方的ip地址,如何查具体物理地址?
·一些网页设计师面试试题及参考答案
·轻松去除视频中自动弹出网页
·网站策划书实例
·怎样制作网页?
·ADSL登录是错误,出现691是什么意思
·网页设计心得:页面布局的简单规则
·网页设计配色应用实例剖析——紫色系
·网站建设中的常用代码
·网页心得:网页色彩的搭配
·17岁高考落榜生成为世界顶尖的IT高手
·asp.net如何生成图片验证码(简单)
·如何记录访问者IP地址
·素材网站、优秀设计素材大全
·网页颜色搭配的技巧
·如何获取IP地址
·网页登录界面设计需要注意的几个问题

网页制作技巧:空格的宽度

日期:2007年8月8日 作者: 查看:[大字体 中字体 小字体]


首先对空格宽度的定义:空格,由于每个浏览器处理会有微小的不同,在这里我将可以选中的宽度作为空格的宽度。视觉宽度和可选中的宽度有 0~3px 的差异(由于 kerning table 的不同),但以下测试的三种浏览器中相同。又因在 ClearType(次像素平滑)情况下视觉宽度有所不同(据猜测可选中的宽度应该和不开 ClearType 一致),简单起见,本文仅研究不开 ClearType 的情况。

测试环境:Firefox 2.0.0.6 / IE 6.0.2900 / IE 7 on WinXP, XHTML transitional (经测试与DTD无关),以下表格中的数字如无单位,均表示像素(px)。

测试方法:利用 CSS 定义字体和字号,选中空格(中-中、英-英、中-英、英-中四种情况),截图并计算宽度。

另外以下提到的 font-size: 11px; 都是指定义的字号,在 Firefox 下忠实显示,在 IE 下实际显示的字号有所不同,经测试如下图:

FF下的11px和13px汉字

网页制作技巧:空格的宽度

IE6下的11px和13px汉字

网页制作技巧:空格的宽度

 IE7下的11px和13px汉字

网页制作技巧:空格的宽度

  • 在宋体下,支持 11px,其余几种测试字体都是当成 12px 处理;
  • IE 6 会把 Tahoma 的 13px 汉字渲染成 14px;IE 7 正常;其余几种测试字体都按照 13px 正常处理;
  • 默认字体、宋体、Arial、Verdana 在 IE 6 和 IE 7 上的字号表现一致。

下面我们开始看空格,以下是测试过程中的一些数据,也可跳过直接看文末的小结部分和这个表格:空格的宽度在阅读之前请确保已经看过上文的情况说明

默认都是 16px 的汉字

中-中 英-英 英-中 中-英
Firefox 2.0 8 8 8 8
IE6 8 4 4 8
IE7 8 4 4 8

注:IE 6、7 下如果调了文字大小,最大时空格为11px,较大时空格为10px

当 font-size: 12px; 时

中-中 英-英 英-中 中-英
Firefox 2.0 6 6 6 6
IE6 6 3 3 6
IE7 6 3 3 6

在 font-size: 12px; 基础上增加 font-family: simsun; 时(用simsun或者宋体没有区别):

中-中 英-英 英-中 中-英
Firefox 2.0 6 6 6 6
IE6 6 6 6 6
IE7 6 6 6 6

我们可以发现如果不设置字体的话,IE使用英文字体渲染内容。也可以认为在中文网页上使用宋体是相对安全的

在上面我们可以看到空格的大小都是 12px 的 1/2,如果是 11px 或者 13px 呢?三个浏览器怎么处理小数呢?继续测试。

font-size: 11px;默认字体

中-中 英-英 英-中 中-英
Firefox 2.0 6 6 6 6
IE6 6 3 3 6
IE7 6 3 3 6

font-size: 13px;默认字体

中-中 英-英 英-中 中-英
Firefox 2.0 7 7 7 7
IE6 7 3 3 7
IE7 7 3 3 7

font-size: 14px;默认字体

中-中 英-英 英-中 中-英
Firefox 2.0 7 7 7 7
IE6 7 4 4 7
IE7 7 4 4 7

font-size: 11px;宋体

中-中 英-英 英-中 中-英
Firefox 2.0 6 6 6 6
IE6 6 6 6 6
IE7 6 6 6 6

font-size: 13px;宋体

中-中 英-英 英-中 中-英
Firefox 2.0 7 7 7 7
IE6 7 7 7 7
IE7 7 7 7 7

font-size: 14px;宋体

中-中 英-英 英-中 中-英
Firefox 2.0 7 7 7 7
IE6 7 7 7 7
IE7 7 7 7 7

上面看到的数据都是默认字体和宋体,一般网页设计的时候不会使用默认字体(即不设置字体),而且为了让英文更好看,我们通常选用 Tahoma、Verdana、Arial 这三种字体。我对这三种字体分别做了测试,同时加上刚才的数据,整理成一个表格:空格的宽度。

小结

  • 只使用宋体是相对安全的,在这三款浏览器里面如此;
  • 除了 Tahoma,其他几种测试情况下,IE 6 和 IE 7 的表现一致(但除了宋体和 FF 一样外,其余都有差别);
  • 在 Firefox 下,同等样式的所有空格(中-中、英-英、中-英、英-中)宽度一致;
  • 在 IE 下,中文字和中文字之间的空格,等于中文字和英文字之间的空格宽度(注意我说的顺序),大于等于英文字和中文字之间的空格(等于的情况出现在设置了中文字体,大于的情况一般是两倍);
  • 如果空格前面是中文,那么空格按照中文处理;如果空格前面是英文,那么空格按照英文处理;
  • 如果已经用了某种英文字体怎么办呢?想办法分别对待空格和内容吧。比如正好是链接与链接间的空格,那么可以给链接设置字号,给空格设置不同字号(还可以分浏览器 hack)。

后记

因为测试比较琐碎繁杂,可能会有错误,欢迎在实践过程中发现问题者的指正。也欢迎多一些字体的测试。

(出处:清风网络学院






上一篇:分析:arp病毒利用的Javascript技术

下一篇:设计理论:微软设计主管一些经验分享

网页制作技巧:空格的宽度 相关文章:
·电脑高手的140个电脑技巧
·《拳皇2002》隐藏超杀出招表 - 技巧心得
·楼梯的上做爱技巧 (图)
·太阁立志传4 攻略及技巧
·新出QQ技巧十六招
·WindowsXP超级技巧
·Vista系统使用技巧总结
·Windows XP的20个超级实用技巧大全
·为什么iexplore.exe在打开网页时CPU使用会100%?
·绝对好用的注册表技巧
网页制作技巧:空格的宽度 相关软件:
·暗黑破坏神 2:毁灭之王 1.10S极品属性装备制作器
·家常菜制作集锦(1)
·招聘面试技巧 视频教程
·Dreamweaver 网页设计
·家常菜制作集锦(2)
·启动光盘制作完全手册(菜鸟先飞 图文教材系列)
·中文版Excel 2003实例与技巧
·多种dos启动盘制作全攻略
·Flash MX 动画制作实例教程
·photoshop cs 超梦幻网页创意宝典

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.viphot.com
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.viphot.com All Rights Reserved. 鄂ICP备05000083号Powered by:viphot