至顶网›网络频道 ›如何处理网页字体

如何处理网页字体

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

利用CSS2规范，我们可以在Web页面或应用程序中随意对字体进行调整。这里Tony Patton深入探讨了字体大小，并讨论了在网页和网页应用程序中调整字体的最佳方法。

作者：techrepublic.com.com 2006年11月23日

关键字： Web应用互联网 HOW TO 网页设计

在网页的设计开发过程中，最重要的莫过于网页的视觉效果了。因此设计人员经常花费大量精力用于调整字体和字号也就没什么稀奇的了。

当你在整合一个Web应用时，必须要决定如何对字体进行编码。在使用CSS时，可供选择的方式很多，每个开发人员可能都会有自己偏爱的方式。在今天的文章中，我就详细介绍一下字号以及在Web应用中该如何处理字号。

字号
CSS2规范是以字体长度来定义字号的，长度数字越大，字体的水平和垂直长度就越大。在长度数字前，有时候还会坠以（+）或者（-）号。另外，在字号后，有可能还跟随着单位标识符。

CSS2规范中包含了两种单位标识符：绝对单位标识符和相对单位标识符。绝对值用来定义单位，而相对单位标识符则表示相对于另一个值的大小。一下列出了几种相对单位标识符：

em: 表示字体的高度。它等于字体的font-size属性经过比例计算后的值。但有一种情况例外，即font-size属性本身使用了em标识符，在这种情况下它会以父元素的字体大小为参考。

ex(x-height): 指定与小写字母x的高度相等。

px(pixels): 这关系到画布或屏幕分辨率。网页显示时的像素值完全取决于显示器分辨率，这会使显示结果随用户在屏幕分辨率上的偏好而改变。

以下是绝对单位标识符：

in (英寸)

cm (厘米)

mm (毫米)

pt(点， 1 pt = 1/72 英寸)

pc(12点， 1 pica = 12 pt)

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

格式化文字的另一种方式是采用百分比。这种方式是以一个数字加一个百分比符号的形式出现的。百分比的数值一般是与另一个值相对的。在字号方面，百分比是与网页的基本字号向对应的。

经过以上的介绍你可以看出，在网页设计工作中，有很多种方法都可以用来设置字号。以下的HTML代码采用了不同的单位标识符（在<p>元素中）。在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>

你也可以在这段代码中再加入像素点的定义方式（px），但是具体数值应该根据你的显示分辨率来确定。比如你的桌面分辨率为1280x1024，那么你采用50px的值就可以和上面给出的字号具有一样的显示效果了。

如果你还是不太明白我上面的介绍，那么可以找一份CSS2规范仔细阅读一番。接下来我将要讨论的是，在你的网页中该采取什么方式来定义字号。

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

那么就让我们更深入的来了解一下相对字号：

在字号方面使用最多的方式就是pixels方式（px）。大多数浏览器都支持这种字号定义方式，但是显示出的效果并不尽相同。浏览器经常会将这个像素与显示器的像素混为一谈，而不是CSS像素。使用这种方式的缺点就是用户无法在IE浏览器中调节字体大小。

很多设计人员喜欢采用point方式（pt），但是这种方式主要用于桌面出版领域，将其移植到Web领域并不容易。在使用中，操作系统或浏览器会将其当作pixel使用。

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

一切为了效果
现有的标准为我们在网页上设定字号提供了多种方式。设计人员可以方便的利用绝对或相对标识符来设置字号。其中要遵循的原则是要保持网页视觉效果在不同浏览器中的一致性和稳定性。

（责任编辑:陈毅东）

查看本文的国际来源

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

如何处理网页字体

业界热点: