什么字体大小百分比应该用于使用CSS的BODY?

时间:2012-06-18 20:25:34

标签: html

我为我的html使用css文件。

我的问题是,我应该设置字体大小百分比吗?我应该把它放在100%,还是我不打扰它,甚至不使用它?

BODY {font-family: Verdana, sans-serif ; font-size: 90%;}

我也为其他标签设置了这个字体大小,例如TD, LI, TH, TABLE等......

我担心如果我更改它,以便我的计算机上的字体看起来不错,那么当他们查看我的网页时,它可能不是其他人的正确设置。

此设置的推荐做法是什么?保持100%?

谢谢

3 个答案:

答案 0 :(得分:1)

我提前道歉,答案太长了......

我认为您对现有答案的问题可能是您对100%实际含义的误解,以及CSS中字体大小的开始。请接受我对这些事情的长期过于简单化的解释。

在元素上设置字体大小时,可以采用以下两种方式之一进行操作:相对的或绝对的。相对值以%em为单位定义,绝对值以pxpt为单位定义。还有其他单位可以使用,但大多数单位与网页排版无关。 (我认为pt是其中不相关的事实之一。

定义绝对值时,指定的字体会以该大小显示。大致。浏览器和操作系统以及用户设置可以并且将会混淆这些值。因此,仅仅因为您设置font-size: 16px;并不意味着该字体的大小将为16像素。

然而,如果您设置了 大小为16像素,那么您通常可以安全地进行设计,前提是您还要定义其他元素的大小。以像素为单位的页面,或与它们相对的单位。

然后,相对价值是相对的 - 但是对于什么? 如果你没有指定任何尺寸那么它们会是什么。

有两件事会影响这个"默认大小":浏览器的默认字体大小(在前面的答案中提到16px是这个默认大小。我既不能确认也不能否认那个。我从不依赖它),或者有效的CSS继承规则。

如果你在body上定义字体大小应该是10px(太小,IMO!),这意味着默认情况下,所有后代html标签将使用相同的大小。有时有例外;并非所有浏览器都能很好地使用默认值和继承功能!但大多数现代浏览器都这样做。

因此,如果您在div上定义字体大小应为200%,则在这种情况下结果为20px,因为您拥有从html继承的10px大小层次结构,并通过将其设置为200%将其修改为20px。您将获得相同的结果将其设置为2em。 (您可以通过将百分比除以100来将' em转换为%


那么,您应该在页面的根元素上设置什么? 100%90%?在我看来,都不是。您应该设置一个显式值,而不是相对值。因为我向你发誓,并非所有的浏览器都会给你相同的默认'大小...

因此,请将body设置为16px。确保您没有操作系统,显示器,浏览器或其他任何内容"缩放"进出;没有调整字体大小或任何性质的大小。然后,您将看到文本(您设置的大小)与其他人看到的文本非常接近。

大多数显示器'像素非常接近相同的大小。但有一个值得注意的例外:新iPad上的视网膜显示。它们的像素明显小于其他所有设备。


您不能也不应该尝试为用户可能拥有的每种可能的奇怪缩放设置调整尺寸。假设人们正在查看1px = 1px,超过90%的人可以正确地设计您的网站。由于视力问题,其余许多人已扩大(放大)他们的操作系统或浏览器。别担心;他们这样做是因为他们无法阅读大多数网站的文字!

16px可能比你在一些内容繁重的网站上所使用的要大,但它是一个不错的起点。我认为让您的网站具有合理的可读性是一个很好的事情,但请记住权衡;文字越大,用户滚动的次数就越多。因此,虽然48px文本可能非常可读,但它会使您的用户烦恼。

现在,那些百分比/ ems在哪里发挥作用?

因为您已经设置了' root'如果您的文档是一个可靠的绝对数字,那么您可以根据该数据调整其余内容。让h1元素175%成为可能; h2可能是125%。您可以调整li项目中文本的大小,使其略微缩小,就像某些网站所做的那样;所以也许这些将是86%。但所有这些百分比都是基于' root'文档根目录的大小,已设置为绝对数字。

然后,您可以更改文档的整个文字大小,同时保持相对大小只需更改一个,单个值:body font-size

最后一点注意:%值的确实很小的变化似乎没有得到反映,因为字体系列可能只有某些特定的大小。因此,如果您将某些内容设置为font-size: 99%,那么它可能会比100%更小。你只需要在那里做一些反复试验。

但是我很遗憾地说...你不能依赖其他浏览器和其他用户'计算机大小与浏览器/计算机完全相同。您的计算机可能在特定字体上显示相同的大小,95%为100%,但我的可能会显示较小的一个。 对于那种事情,你无能为力......

我最后可以说的是......"欢迎使用Web排版!" (是的......它是一个令人困惑的主题,有许多“maybes'和' kindas'等等!”

答案 1 :(得分:0)

默认字体大小为16px。如果这对您没问题,请不要费心去改变它。 font-size: 100%;只是一个浪费的代码行。您可能会看到的唯一区别是移动设备。

答案 2 :(得分:-2)

使用100%的字体大小是没用的。这意味着您将使用当前字体大小(在本例中为16px)。使用pxpt表示绝对尺寸,或Em%表示相对尺寸。有关详情,请参阅此页:http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

此外,如果您在各种浏览器中尝试检查兼容性,它会很有用。