网页设计开发:如何处理网页字体

2016-02-19 17:31 3 1 收藏

今天图老师小编给大家介绍下网页设计开发:如何处理网页字体,平时喜欢网页设计开发:如何处理网页字体的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

在网页的设计开发过程中,最重要的莫过于网页的视觉效果,设计人员经常花费大量精力用于调整字体和字号。利用CSS2规范,我们可以在Web页面或应用程序中随意对字体进行调整。本文将深入探讨字体大小,并介绍在网页和网页应用程序中调整字体的最佳方法。

  如何调整字号

  CSS2规范是以字体长度来定义字号的,长度数字越大,字体的水平和垂直长度就越大。在长度数字前,有时候还会缀以+或者-号。另外,在字号后,有可能还跟随着单位标识符。CSS2规范中包含了两种单位标识符:绝对单位标识符和相对单位标识符。绝对值用来定义单位,而相对单位标识符则表示相对于另一个值的大小,以下列出了几种相对单位标识符:

  em表示字体的高度,它等于字体的font-size属性经过比例计算后的值。但有一种情况例外,即font-size属性本身使用了em标识符,在这种情况下它会以父元素的字体大小为参考;ex(x-height)指定与小写字母x的高度相等;px(pixels)关系到画布或屏幕分辨率,网页显示时的像素值完全取决于显示器分辨率,这会使显示结果随用户在屏幕分辨率上的偏好而改变。

  另一种实现绝对字号的方法是使用缩放功能。你可以使用以下关键字来缩小或放大字体:xx-small、x-small、small、medium、large、x-large,以及xx-large。其中Medium是一个基准,带有small字样的参数会让字体缩小,而带有large字样的参数会让字体扩大。CSS2规范中定义的缩放比例是1.2,但是不同的浏览器可能有不同的解析结果。

  采用何种方式

  CSS中有大量关于字体字号方面的参数,那么你的网页该采用什么定义方式呢?采用绝对标识符来确定字号有很多弊端,比如会对一致性和灵活性造成影响,还会在可访问性方面出现问题。相对字号与绝对字号相比,可以让用户通过多种方式来调大字号,从而更便于阅读。在实际开发中,大多数设计人员采用的也是相对字号。下面让我们更深入地了解一下相对字号:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  在字号方面使用最多的方式就是pixels方式(px),大多数浏览器都支持这种字号定义方式,使用这种方式的缺点就是用户无法在IE浏览器中调节字体大小。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  最普通的字号定义方式是使用em或百分比。用em定义的字号可以在任何浏览器中缩放,它同时也照顾到了用户对字体的偏爱。不过em在IE中的表现并不理想,因此针对IE浏览器用户,最好还是使用百分比。

来源:http://www.tulaoshi.com/n/20160219/1615398.html

延伸阅读
标签: Web开发
在设计网络应用时,您必须决定如何编辑字体。使用CSS时存在大量选项,每个开发者都有自己的喜好。本文主要讨论字体大小和网络应用内的操作。在开发网络应用时,没有比外观更重要的事情了。所以,如果发现设计人员十分关注字体及字体大小,我不会感到奇怪! 字体大小 CSS2规范根据长度——水平和垂直尺寸——来定义字体。这个长度...
标签: Web开发
在设计网络应用时,您必须决定如何编辑字体。使用CSS时存在大量选项,每个开发者都有自己的喜好。本文主要讨论字体大小和网络应用内的操作。在开发网络应用时,没有比外观更重要的事情了。所以,如果发现设计人员十分关注字体及字体大小,我不会感到奇怪! 字体大小 CSS2规范根据长度水平和垂直尺寸来定义字体。这个长度为一...
看到一组好字,如何用在网站上?今天这组网站不仅选择了合适的字体,版式设计也保持了清爽干净的风格,喜欢的朋友一起来欣赏吧。 Federation Square Comedy Hack Day Supereight Studio Small Fortune Northbound Design Wild Blue Technologies The Modern House Department Creatif Kingdom Kettle ...
标签: 网页设计 设计
虚拟实境技术结合内容 虚拟实境的话题从前年延烧到今年,科技巨头对虚拟实境的投资力道丝毫没有减弱的迹象,特别是Facebook 未来十年将砸下 30 亿美金专注虚拟实境的研发。可预见的是技术更臻成熟,也会有愈来愈多媒体或品牌运用虚拟实境科技「说故事」,为人们创造更身历其境的感受。 不失真、载入快的 SVG 向量图档大...
标签: Web开发
相关文章:CSS教程:简单理解em 秦歌(YanKaven)的站点:http://dancewithnet.com/ 今天是 Firefox3的2008下载日 ,这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能,我最关注的功能之一是 全页面缩放(Full page zoom) 。这就意味着Firefox3和Opera以及IE7+都可以让用户完全控制显示内容的大小同时自动调整页面布局和结构,...

经验教程

716

收藏

93
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部