网管联盟 | 网管论坛 | 网管u家 | 网管博客 | 网管软件 | 网管求职 | 小游戏 | 网管搜索 | 网管原创 | 网管聚合 | 网管读摘 | 网管焦点 | 世界素材 | 会员投稿 | 会员中心 
中国网管联盟
Windows Linux Cisco 网络技术 数据库 黑客攻防 DotNet Java PHP 认证 新闻资讯 服务器 存储资讯 网络设备 网管学堂 技术专题 焦点 网吧频道
 当前位置: > bitsCN.com > 网管学堂 > 网页设计 > Dreamweaver > 技术教程 > 网页设计中空格的宽度的说明  

网页设计中空格的宽度的说明

2008-02-13  作者:bitsCN整理  来源:中国网管联盟  点评 投稿 收藏

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

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

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

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

网管联盟bitsCN_com

11px and 13px 网管下载dl.bitscn.com

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

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

默认都是 16px 的汉字: 网管u家u.bitsCN.com

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

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

当 font-size: 12px; 时: 中国网管联盟bitsCN.com

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

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

网管论坛bbs_bitsCN_com

网管bitscn_com


TAGs
 上一篇:矢量绘图软件中创建阴影的方法与技巧   下一篇:Dreamweaver定义模板批量制作web网页
网页设计中空格的宽度的说明 评论:
loading.. 评论加载中…
评论:请自觉遵守互联网相关政策法规,评论不得超过250字。

验证码: 注册用户