品牌创意企业推荐 推荐: 网站建设 北京网站建设 
 
搜索 竞赛 产业 文案 论吧 论坛 酷站 矢量库 图片库 设计网址 作品集> 注册 - 登陆
首 页设计资讯大赛征集平面设计UI设计CG/动画工业设计建筑环境数码影像教程区设计访谈 精品欣赏会员作品集
>> 论坛发布优秀教程申请个人教程专区
推荐:经典素材资源
滚动新闻:[6-10]融于意,形于展!---52design作品集、设计师网上联展!
当前位置: 首页 >> 教程 >> HTML/CSS教程 >>正文
用CSS设计高用户体验的web文字大小
资讯/教程/作品在线投稿  - 进入素材基地 - 论坛讨论 - 查看更多相关内容
时 间:2007-8-23 15:39:53   作者:   来 源:52design.com   浏览:
    在开发网络应用时,没有比外观更重要的事情了。所以,如果发现设计人员十分关注字体及字体大小,我不会感到奇怪!
·设计师个人作品集火热申请中!
·查询网站排名推荐您用Chianz排名查询
·“论吧”正式上线 欢迎参与主题讨论
·全球经典酷站推荐欣赏
·矢量素材 给设计师提供强大后盾
·加入设计师论坛,精彩无限
·设计网址大全,免费收录所有设计站点

  在设计网络应用时,您必须决定如何编辑字体。使用CSS时存在大量选项,每个开发者都有自己的喜好。本文主要讨论字体大小和网络应用内的操作。

  字体大小

  CSS2规范根据长度——水平和垂直尺寸——来定义字体。这个长度为一个数值,前面可能带一个可选的加(+)或减(-)标记符。另外,该数值后可能有一个可选的单位标识符。

  另外,CSS2规范定义了两个单位类型:绝对单位和相对单位。绝对值指定单位,而相对单位指定一个与另一个值成比例的值。下面的列表列出了相对单位标识符:

em:元素字体的高度。它与使用该字体的元素的字体大小属性计算值相等。当它出现在字体大小属性值本身中时,会出现异常,这时它指母元素的字体大小。
ex(x-高度):CSS2规范将它描述为小写字母x的高度。
px(像素):它与背景或屏幕的分辨率有关。根据显示器分辨率输出不同像素,由于用户的喜好不同,显示器的分辨率可能会有很大差异。
  下面是有效的绝对单位标识符:

in(英寸)
cm(厘米)
mm(毫米)
pt(点,1点=1/72英寸)
pc(12点活字,1pc=12点)
  测量绝对大小的另一种方法是使用衡量一个值的比例因数,应用以下关键字:最小、较小、小、中、大、较大和最小。中为基值,变小就减去一个因数,变大就增加一个因数,等等。CSS2规范定义的比例因数为1.2,这个值也可能依浏览器而变化。

  还可以应用百分比值来格式化文本。百分比值是一个可选的标记符,即数字后带有一个百分比符号(%)。百分比值总是与另一个值成比例。就字体而言,它与网页的基本字体大小成一定比例。

  如您所见,有许多方法可完成呈现文本这个看似简单的任务。下面的HTML格式文本(在段落元素中)应用了各种单位标识符。其中所有的值都相等,并假定以72dpi进行显示。

以下是引用片段:
<html><head>
<title>Font Sizing - equal values</title>
</head><body>
<p style="font-size: 36pt;">Point</p>
<p style="font-size: 3pc;">Pica</p>
<p style="font-size: 0.5in;">Inches</p>
<p style="font-size: 1.27cm;">Centimeters</p>
<p style="font-size: 12.7mm;">Millimeters</p>
<p style="font-size: 300%;">Percentage</p>
</body></html>


  您可以在这个列表中增加像素值,但它的值要依环境而定。例如,我的分辨率为1280X1024的手提电脑将显示与在上表中使用50像素值一致的文本。

  仔细阅读前面提到的CSS2规范,可以获得更多字体大小方面的知识。现在我将讨论如何决定在网络应用中使用哪种方法。

  选择哪一种方法

  在CSS中有许多和字体有关的选项,但哪一种最适合在您的网络应用中使用呢?绝对大小有许多缺陷,特别是在一致性、灵活性与访问性方面存在问题。与绝对字体大小相比,任何视力有缺陷的用户可使用相对字体大小来扩大页面中的文字,这样更便于阅读。因此,开发者经常使用相对大小。

  让我们来详细了解一下相对大小:

  像素是最通用的大小值。多数浏览器都支持它,但也并非总是如此。浏览器常常将像素当作屏幕像素而非CSS像素来处理。像素的一个缺点在于,它忽略或否定用户的喜好,且不能在IE中调整大小。

  许多开发者偏爱用点来衡量字体大小,但点主要用于桌面印刷系统,不方便移植到网络中。在呈现文本时,操作系统或浏览器默认使用像素。

  最常用的方法是使用em或百分比大小。EM可在所有支持调整尺寸的浏览器中进行调整。Em还与用户偏爱的默认大小有关。在IE中应用em的结果难以预料。在IE中最好使用百分比来设定文本大小。

  下面的例子结合使用em和百分比值来对文本进行格式化。基本文本用百分比值来设置,然后用em来进行调整。

以下是引用片段:
<html><head>
<title>Display Test</title>
<style type="text/css">
body {font: Sans Serif, Arial; font-size: 110 %}
</style></head><body>
<p style="font-size: 1.0em;">Basic text.</p>
<p style="font-size: 1.5em;">Larger text.</p>
<p style="font-size: 0.5em;">smaller text.</p>
</body></html>

  全都与外观有关

  现有的标准提供许多格式化并呈现网络应用中的文本的方法。开发者可以很方便地将文本分解成相对和绝对标识符。关键在于保持一致,并彻底检测解决方案。


本文链接:


52design素材资源库52design图片库52design酷站营

我爱设计网www.52design.com
(在线编辑:morion) 】【打印】【关闭】【设计论坛】【设计师作品集
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站地址,且不准打上各自站点的水印。

经典设计欣赏 设计关键字:VI 新锐 包装 装帧 海报 地产广告 画册 名片 标志 软件界面 ICO 网页
王赟涵插画作品
王赟涵插画作品
byetom 彩色童话插画作品欣赏
byetom 彩
球宝个人原创插画作品展示
球宝个人原创插画
金画奖美少女时尚插画作品欣赏
金画奖美少女时尚
白蝙蝠的铅笔画
白蝙蝠的铅笔画
葛闽丰插图作品欣赏
葛闽丰插图作品欣
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站
个性展示 网站教学 工 作 室 学校教育 卡通漫画 文化艺术 体育运动 美容健身 食品饮料
当日文章推荐 查看更多相关内容
FireWorks| Fireworks设计移动硬盘简精教 [8-23]FireWorks| FireWorks实现抠图简单的招数 [8-23]
建站方案| 网站运营者必鉴:营销团队的建设与管理 [8-23]网站推广| 实施内容推广策略的三个细节问题 [8-23]
创意文案| 台湾历届广告金句奖 [8-23]创意观点| 分众传媒是如何绑架广告主的? [8-23]
理论文献| 缺少合理的产业模式 中国动漫倒在日本 [8-23]理论文献| 中国动漫在崛起等待期该做些什么 [8-23]
Photoshop| Photoshop教程:实现海报卷纸 [8-23]Photoshop| 用Photoshop打造立体的金属网 [8-23]
插画艺术| 球宝个人原创插画作品展示 [8-23]会展| 哈尔滨特色旅游商品设计大赛作品展开展 [8-23]
会员作品集推荐 查看更多推荐会员作品
平面作品 | 插画作品 | 网页作品 | 包装作品 | 软件UI | 室内设计 | 数码摄影作品 | 建筑环境 | 工业设计 | 其他
降落烟仔卡卡走-迷Divinedoors互联通
GUI报纸广告LogoIDEAL玩具汇森玩具

数据载入中...
视觉焦点
优秀作品在线投稿
·
球宝个人原创插画作品展示
球宝个人原创
美国Amir H.平面设计作品
美国Amir
日本经典视觉平面作品欣赏
日本经典视觉
New Faces 2006优秀作品欣赏
New Fa

站点新入
Fireworks设计移动硬盘简精教程
Firewo
Fireworks快速改变人脸的颜色教程
Firewo
展区
·翰海博网诚聘资深网页设计师 (2-29止)
·招聘全职美工 (8-30止)
·儒林设计工作室_招聘 (6-30止)
·WEB/GUI界面设计师 (1-10止)
·高薪诚聘网页美工 (1-28止)
·招聘资深平面设计师 (1-31止)
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:hpfmall
网站地址:http://www.hpfmall.com/
加入时间:2008-9-5 11:23:47
网站名称:themeforest
网站地址:http://themeforest.net/
加入时间:2008-9-5 11:12:59
网站名称:captiva.chevrolet
网站地址:http://captiva.chevrolet.com.cn/freedom/
加入时间:2008-9-5 11:12:28
网站名称:albumcreative
网站地址:http://www.albumcreative.com/
加入时间:2008-9-5 11:12:00
网站名称:p1w1max
网站地址:http://www.p1w1max.com/
加入时间:2008-9-5 11:07:04
网站名称:pixel-mix
网站地址:http://pixel-mix.sinacool.com/
加入时间:2008-9-5 11:06:04
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿