仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1583|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:CSS依据用户需求设置网页字体巨细

[复制链接]
透明 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:05:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
提高易用性。使用CSS可以结构化HTML,例如:标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。
在举行CSS页页结构时,页面的表面很主要,但也必要思索字体与笔墨巨细的成绩,在poluoluo.com中也有过相干的先容。假如发明计划职员非常存眷字体及字体巨细,我其实不感应惊异。利用CSS来编纂字体有林林总总的办法,每位计划师城市有本人偏幸的计划习气,但必需选择更能进步用户体验的办法。明天网页教授教养网将会合会商字体巨细的把持来表现更多的用户体验。

  字体巨细
  CSS2标准中关于程度和垂直尺寸来界说字体的长度。这个长度为一个数值,后面大概带一个可选的加(+)或减(-)标志符。别的,该数值后大概有一个可选的单元标识符。
  别的,CSS2标准界说了两个单元范例:相对单元和绝对单元。相对值指订单位,而绝对单元指定一个与另外一个值成比例的值。上面的列表列出了绝对单元标识符:
  
  em:字体的高度,绝对长度单元。相对以后工具内文本的字体尺寸。如以后对行内文本的字体尺寸未被工资设置,则相对扫瞄器的默许字体尺寸(16px)。
  ex(x-高度):CSS2标准将它形貌为小写字母x的高度。
  px(像素):它与背景或屏幕的分辩率有关。依据显现器分辩率输入分歧像素,因为用户的喜欢分歧,显现器的分辩率大概会有很年夜差别。

  上面是无效的相对单元标识符:

in(英寸)
cm(厘米)
mm(毫米)
pt(点,1点=1/72英寸)
pc(12点活字,1pc=12点)
  丈量相对巨细的另外一种办法是利用权衡一个值的比例因数,使用以下关头字:最小、较小、小、中、年夜、较年夜和最小。中为基值,变小就减往一个因数,变年夜就增添一个因数,等等。CSS2标准界说的比例因数为1.2,这个值也大概依扫瞄器而变更。
  还能够使用百分比值来格局化文本。百分比值是一个可选的标志符,即数字后带有一个百分比标记(%)。百分比值老是与另外一个值成比例。就字体而言,它与网页的基础字体巨细成必定比例。
  如您所见,有很多办法可完成出现文本这个看似复杂的义务。上面的HTML格局文本(在段落元素中)使用了各类单元标识符。个中一切的值都相称,并假定以72dpi举行显现。

<html>
<head>
<title>FontSizing-equalvalues[www.poluoluo.com]</title>
</head>
<body>
<pstyle=”font-size:36pt;”>Point</p>
<pstyle=”font-size:3pc;”>Pica</p>
<pstyle=”font-size:0.5in;”>Inches</p>
<pstyle=”font-size:1.27cm;”>Centimeters</p>
<pstyle=”font-size:12.7mm;”>Millimeters</p>
<pstyle=”font-size:300%;”>Percentage-www.poluoluo.com</p>
</body>
</html>
  您能够在这个列表中增添像素值,但它的值要依情况而定。比方,我的分辩率为1280X1024的手提电脑将显现与在上表中利用50像素值分歧的文本。
  细心浏览后面提到的CSS2标准,能够取得更多字体巨细方面的常识。如今我将会商怎样决意在收集使用中利用哪一种办法。

  选择哪种办法
  在CSS中有很多和字体有关的选项,但哪种最合适在您的收集使用中利用呢?相对巨细有很多缺点,出格是在分歧性、天真性与会见性方面存在成绩。与相对字体巨细比拟,任何目力出缺陷的用户可以使用绝对字体巨细来扩展页面中的笔墨,如许更便于浏览。因而,开辟者常常利用绝对巨细。
  让我们来具体懂得一下绝对巨细:
  像素是最通用的巨细值。多半扫瞄器都撑持它,但也并不是老是云云。扫瞄器经常将像素看成屏幕像素而非CSS像从来处置。像素的一个弱点在于,它疏忽或否认用户的喜欢,且不克不及在IE中调剂巨细。
  很多开辟者偏幸用点来权衡字体巨细,但点次要用于桌面印刷体系,不便利移植到收集中。在出现文本时,操纵体系或扫瞄器默许利用像素。
  最经常使用的办法是利用em或百分比巨细。EM可在一切撑持调剂尺寸的扫瞄器中举行调剂。Em还与用户偏幸的默许巨细有关。在IE中使用em的了局难以意料。在IE中最好利用百分比来设定文本巨细。
  上面的例子分离利用em和百分比值来对文本举行格局化。基础文本用百分比值来设置,然后用em来举行调剂。

<html>
<head>
<title>DisplayTest-www.poluoluo.com</title>
<styletype=”text/css”>
body{font:SansSerif,Arial;font-size:110%}
</style>
</head>
<body>
<pstyle=”font-size:1.0em;”>Basictext.</p>
<pstyle=”font-size:1.5em;”>Largertext.</p>
<pstyle=”font-size:0.5em;”>smallertext.www.poluoluo.com</p>
</body>
</html>
  一切都与表面有关
  现有的尺度供应很多格局化并出现收集使用中的文本的办法。开辟者能够很便利地将文天职解成绝对和相对标识符。关头在于坚持分歧,并完全检测办理计划。

可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
老尸 该用户已被删除
沙发
发表于 2015-1-18 05:13:52 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
admin 该用户已被删除
板凳
发表于 2015-1-21 18:19:29 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
透明 该用户已被删除
地板
 楼主| 发表于 2015-1-30 21:46:17 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
兰色精灵 该用户已被删除
5#
发表于 2015-2-6 16:17:02 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
再见西城 该用户已被删除
6#
发表于 2015-2-17 06:15:04 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
精灵巫婆 该用户已被删除
7#
发表于 2015-3-5 17:16:24 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
简单生活 该用户已被删除
8#
发表于 2015-3-12 11:24:40 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 21:16

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表