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

在网页的设计开发过程中,最重要的莫过于网页的视觉效果,设计人员经常花费大量精力用于调整字体和字号。利用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中有大量关于字体字号方面的参数,那么你的网页该采用什么定义方式呢?采用绝对标识符来确定字号有很多弊端,比如会对一致性和灵活性造成影响,还会在可访问性方面出现问题。相对字号与绝对字号相比,可以让用户通过多种方式来调大字号,从而更便于阅读。在实际开发中,大多数设计人员采用的也是相对字号。下面让我们更深入地了解一下相对字号:

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

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

时间: 2024-10-08 04:18:34

网页设计开发:如何处理网页字体的相关文章

网页设计参考:推荐20个网页设计/开发博客

文章描述:要从因特网上浩如星辰.眼花缭乱的网页设计博客中找到值得一读的,实非易事.为此,我们准备了一张清单,向大家推荐20个网页设计/开发博客.其中一部分相信大家已有耳闻,还有一些虽然名不经传却内容出色,希望大家能从博客精彩的内容中获益. 要从因特网上浩如星辰.眼花缭乱的网页设计博客中找到值得一读的,实非易事.为此,我们准备了一张清单,向大家推荐20个网页设计/开发博客.其中一部分相信大家已有耳闻,还有一些虽然名不经传却内容出色,希望大家能从博客精彩的内容中获益. Design Instruct

性能-网页设计开发与出现的问题

问题描述 网页设计开发与出现的问题 为什么在dreamweaver 中表格嵌套中内层的表格的bgcolor="#cccccc"在IE9中显示黑色的

手机网页设计原则:移动网页中的基础元素

文章描述:移动网页设计应该包含的5个基本元素. 大部分人都认为手机网页设计与电脑网页设计有很大不同,其实不是,手机网页除了小且可以触摸外,很多设计原则与电脑网页设计是共通的.这里有 5 个基本的元素,希望对设计师有所帮助. 1. 有意义的导航 在移动设备上获取信息实际上是有趣的体验,因此,令用户在使用过程中感到愉快很有必要,简单地删除屏幕上的链接(或taps)并不能达到用户友好体验的目的.导航应该包含用户需要的内容,并提供明确的路径.如果用户知道跳转的具体页面,就会进行点击. 首先,确保导航在用

网页设计技巧:创建网页背景材质的方法

文章描述:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Photo

网页设计-jquery替换网页body中所有的“黑龙江”为“北京”

问题描述 jquery替换网页body中所有的"黑龙江"为"北京" jquery替换网页body中所有的"黑龙江"为"北京","黑龙江"可能是在不同的标签,不同的 中,请问如何写代码?需要完整代码,谢谢了! 解决方案 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.j

响应式网页设计:rem设置网页字体大小自适应

文章简介:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷. 首先简单科普一下什么是响应式网页.响应式网页是指会根据输出设备的分辨率不同,而自动调整布局的网页.同时,在输出设备分辨率改变时,也能及时自动调整.说穿了,就是三个字:自适应. 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web

网页设计时把握网页布局的参考

参考|设计|网页|网页设计 最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思.在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西.你当然也可以创造出自己的设计方案,但如果你是初学者,那么最好明白网页布局的基本概念.   1.页面尺寸 由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页

网页设计技巧:学习网页设计的网格系统

文章描述:网格系统是一种好的习惯,也是一种格式化的设计工具.有了它,你能更专注于内容呈递,更专注于强调重点. 网格确保了设计结构的组织分明.结构明晰.我们可以通过网格系统更好的打造设计的信息层级,让设计阅读起来更具有韵律感.就跟编码一样,编码需要有机的组织结构,而网页设计的网格系统也是同样的作用. The Grid System 设计师用起来舒服,开发者用起来顺手,当然,网格系统对于用户也是大有裨益的.我一直在强调设计要注重用户体验--毕竟,客户为你的内容消费,因此你要向他们提供有价值的体验.使

网页设计技巧之网页首屏高度如何确定?

一个经验丰富的网页设计师在做网页原型设计或者视觉效果图时,首先必须要做的是标注清楚网站首屏的高度线,以便直观的看到网站首屏的高度,首屏可以显示的元素.那么,我们该如何来标注一个网页的首屏线那?笔者结合网上的一些谈论特整理如下: 首屏的高度直接跟客户端的各种客观的条件有关系,因为我们要确定首屏的高度(标注首屏线)就需要结合一些相对准确的内部统计数据来分析了,根据各个客户端的操作系统.浏览器分布和屏幕分辨率等情况,并结合常见浏览器状态栏.任务栏等高度进行分析如下: 第一步:分析常见分辨率及浏览器下高