我提前为一个太长的答案道歉......
我相信您在现有答案中遇到的问题可能是您对100%
实际含义以及如何在 CSS 中首先获得字体大小的误解。请忍受我对事物的冗长、过于简单化的解释,在这里。
在元素上设置字体大小时,可以通过以下两种方式之一进行;相对的或绝对的。相对值以%
或等单位em
定义,绝对值以和等单位px
定义pt
。还有其他可以使用的单位,但大多数都与网页排版无关。(事实上,我认为那pt
是不相关的)。
当您定义一个绝对值时,您指定的字体会以该大小显示。大致。浏览器、操作系统和用户设置可以并且将会弄乱这些值。所以,仅仅因为你设置了 afont-size: 16px;
并不意味着字体的大小是 16 像素。
但是,如果您设置了 16 像素大小,您通常可以安全地进行设计,前提是您还以像素或相对单位定义页面上其他元素的大小。
那么,相对价值是相对的——但与什么相关呢?如果您根本没有指定尺寸,它们会是什么。
有两件事会影响这个“默认大小”:浏览器的默认字体大小(在之前的答案中提到这16px
是这个默认大小。我既不能确认也不能否认。我从不依赖它),或者有效的 CSS 继承规则。
如果您定义body
字体大小应为 10px(太小,IMO!),这意味着默认情况下,所有后代 html 标记将使用相同的大小。有时也有例外;并不是所有的浏览器都能很好地使用默认值和继承,一直!但是大多数现代浏览器都可以。
因此,如果您在 adiv
上定义 font-size 应该是200%
,结果将20px
在这种情况下,因为您从 html 层次结构继承了 10px 大小,并且您通过将其设置为 200% 将其修改为 20px。将其设置为 2em 将获得相同的结果。(您可以通过将百分比除以 100来“转换”em
为)%
那么,您应该在页面的根元素上设置什么?100%
? 90%
? 在我看来,两者都没有。您应该设置一个显式值,而不是一个相对值。因为我向你发誓,并不是所有的浏览器都会给你相同的“默认”大小......
因此,将 设置body
为16px
。确保您的操作系统、显示器、浏览器或其他任何“放大”或缩小的东西都没有;没有调整字体大小或任何类似性质的东西。然后,您将看到文本(无论您将其设置为何种大小),与其他人的看法非常接近。
大多数显示器的像素都非常接近相同的大小。但有一个值得注意的例外:新 iPad 上的视网膜显示屏。它们的像素明显小于几乎所有其他设备。
您不能也不应该尝试为用户可能拥有的每个可能的奇怪缩放设置调整大小。您可以并且应该适当地设计您的网站,假设人们正在查看 1px=1px,超过 90%。由于视力问题,其余许多人已扩大(放大)其操作系统或浏览器。不用担心;他们这样做是因为他们无法阅读大多数网站的文字!
16px 可能比您在某些内容繁重的网站上习惯的要大,但它是一个不错的起点。我认为使您的网站具有合理的可读性是一件好事,但请记住权衡;文本越大,需要滚动的用户就越多。因此,虽然 48px 文本可能非常易读,但它会惹恼您的用户。
那么,这些百分比/ems在哪里发挥作用?
由于您已将文档的“根”设置为可靠的绝对数字,因此您可以根据该数字调整其余内容。让你的h1
元素175%
也许;h2
可能是125%
。您可能会像某些网站那样将项目中的文本大小调整为li
稍小一些;所以也许那些会是86%
。但是所有这些百分比都是基于文档根目录的“根”大小,您已将其设置为绝对数字。
然后,您可以更改文档的整个文本大小,同时保持相对大小,只需更改单个值:body
font-size
.
最后一点:值的真正微小变化%
似乎没有反映出来,因为字体系列可能只有某些特定的大小。因此,如果您对其进行设置,font-size: 99%
它可能不会比它在100%
. 您只需要在那里进行一些反复试验。
但我很遗憾地说......您不能依赖其他浏览器和其他用户的计算机大小与您的浏览器/计算机完全相同。您的计算机可能会在 95% 和 100% 的特定字体上显示相同的大小,但我的计算机可能会显示较小的字体。对于这种事情,你无能为力...
最后,我只能说……“欢迎使用 Web 排版!” (是的......这是一个令人困惑的主题,有很多“也许”和“有点”之类的!)