CSS如何控制网页字体?

来源 :网络与信息 | 被引量 : 0次 | 上传用户:reg8c4user
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  在开发网络应用时,没有比外观更重要的事情了。所以,如果发现设计人员十分关注字体及字体大小,我不会感到奇怪!
  在设计网络应用时,你必须决定如何编辑字体。使用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>FontSizing-equalvalues</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</p>
  </body>
  </html>
  
  你可以在这个列表中增加像素值,但它的值要依环境而定。例如,我的分辨率为1280X1024的手提电脑将显示与在上表中使用50像素值一致的文本。
  仔细阅读前面提到的CSS2规范,可以获得更多字体大小方面的知识。现在我将讨论如何决定在网络应用中使用哪种方法。
  
  选择哪一种方法
  
  在CSS中有许多和字体有关的选项,但哪一种最适合在你的网络应用中使用呢?绝对大小有许多缺陷,特别是在一致性、灵活性与访问性方面存在问题。与绝对字体大小相比,任何视力有缺陷的用户可使用相对字体大小来扩大页面中的文字,这样更便于阅读。因此,开发者经常使用相对大小。
  让我们来详细了解一下相对大小:
  像素是最通用的大小值。多数浏览器都支持它,但也并非总是如此。浏览器常常将像素当作屏幕像素而非CSS像素来处理。像素的一个缺点在于,它忽略或否定用户的喜好,且不能在IE中调整大小。
  许多开发者偏爱用点来衡量字体大小,但点主要用于桌面印刷系统,不方便移植到网络中。在呈现文本时,操作系统或浏览器默认使用像素。
  最常用的方法是使用em或百分比大小。em可在所有支持调整尺寸的浏览器中进行调整。em还与用户偏爱的默认大小有关。在IE中应用em的结果难以预料,在IE中最好使用百分比来设定文本大小。
  下面的例子结合使用em和百分比值来对文本进行格式化。基本文本用百分比值来设置,然后用em来进行调整。
  
  <html>
  <head>
  <title>DisplayTest</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.</p>
  </body>
  </html>
  
  现有的标准提供许多格式化并呈现网络应用中的文本的方法。开发者可以很方便地将文本分解成相对和绝对标识符。关键在于保持一致,并彻底检测解决方案。
其他文献
1 引言    近年来,我国电子政务建设取得巨大成就,很多政府机关都建立了局域网。自2000年1月1日起施行的《计算机信息系统国际联网保密管理规定》第六条明确规定涉及国家秘密的计算机信息系统,不得直接或间接地与国际互联网或其他公共信息网络相联接,必须实行物理隔离。根据这一规定,许多党政机关的办公局域网都与互联网等外部网络实行了物理隔离,这些局域网内的计算机就不能联接到互联网进行操作系统更新,造成计
期刊
最近看到几个网友由于不熟悉市场价格,购买的本本大幅高于了市场零售价,在论坛后悔莫及,本人深表同情,但是看到更多的是我们POP论坛的兄弟姐妹成功智斗JS的购机经历,忽然想到,难道买个笔记本就要这么复杂,没有非常深入地了解就不能下手了?可以说不是我们不机灵,而是JS太狡猾。   为了方便大家更轻松地买本,故写下10招给大家参考。    1.微步凌波     在我们购买本本前,最有效最省时的办法就是来z
期刊
当你常去的论坛上有个 Flash 广告,而你每次刷新页面的时候它都会从头播放,会不会感觉很烦? 所以我们要改装一下这个Flash,给它植入记忆功能。    要实现的效果:  刷新或关闭页面的时候记住上次的播放位置;  下一次打开页面时,动画接着上一次的位置继续播放。    应用效果:可以看经典论坛的 Banner 广告。    实现代码如下(发布成AS1/AS2):  var deng = Sha
期刊
在网页制作过程中,也许我们会遇到这样的情况,当我们的大量网页已经完成,却发现它们都有一个共同错误需要修改。这时候不可能完全依靠手工去更改了,怎么办呢?利用Dreamweaver中的查找和替换功能就能帮助你快速而准确地完成修改。   大家都使用过Word等软件的查找和替换功能,Dreamweaver的查找和替换功能与那些软件的查找和替换的用法相似,但功能更强大。在它的查找和替换对话框中甚至可以用精确
期刊
1 引言    网络故障管理是网络管理的一个重要组成部分。故障管理的有效与否和功能强弱直接关系到被管理网络的可用性和可靠性。传统的基于SNMP的网络故障管理模型是以Client/ Server 技术为核心的集中故障管理方式。它通过不断轮询被管对象 Agents (Servers) 和接收 Agents 的报告(Trap)两种机制获得故障信息。该机制主要存在两个方面的问题:(1) 缺乏灵活性、可扩展
期刊
eMule服务器资源丰富,内容繁多,我们想找的资源几乎都能找到,所以使用eMule(电驴)下载的用户很多。下面给大家介绍两款小软件,用它们可以让电驴下载更加得心应手,速度更加快。     eMule(电驴)资源更新提前知    一般我们通常使用VeryCD进行eMule(电驴)下载。而在VeryCD上寻找资源,就必须去到VeryCD网站上查看,尤其是在进行下载较新的动画片、电影、电视剧时。由于这些
期刊
1 引言    GPRS技术现在已经非常成熟,具有覆盖范围广、接入速度快、使用成本低和永远在线等特点[3]。因此,采用GPRS方式是一种可行的单片机无线上网方案。    2 设计方案    2.1硬件部分的设计方案  硬件部分包括单片机(W77E58)、GPRS模块(MC39i)、SIM卡插座、电源系统、外部数据存储器[2]和接口电路等,如图1。      2.1.1 单片机W77E58  单片机
期刊
近日,Windows Vista SP1和Windows XP SP3的消息正在坊间传开,相信很多网民也有所耳闻。陈永正的离职到底与Vista的推广不力是否有直接的关系,这个不得而知。但是根据Windows 2000向Windows XP演进的规律,随着现在机器配置越来越高,Windows Vista的市场份额会得到很好的增长。而迅雷作为我们最为流行的下载工具,其在Vista下怎样才能够用得更好?
期刊
微软公司日前透露,微软将对Vista之后的下一代操作系统Windows 7的内核代码进行“瘦身”处理。   微软高级工程师Eric Traut最近在伊力诺伊大学的一次演讲中,探讨了未来微软的虚拟化技术,其中内容涉及到了Windows 7。   Traut称,作为微软Vista之后的下一代操作系统Windows 7的一部分,微软首先将进行一个名为“MinWin”的项目开发,意在打造最精简、最高效的W
期刊
PHP批量取得checkbox的值    1.命名    <inputtype='checkbox'name='checkbox[]'value=$dwmyrow[banzhu]/>    2.使用  当计划当作sql指令的一部分时:如果参与控制的字段是数值型的,则:    if(!empty($_POST['checkbox'])){  $expr=join(",",$_POST['checkb
期刊