首页 文章

CSS：100％字体大小 - 100％的什么？

提问于
浏览 次
124

有many articles和questions关于percentage-sized vs other-sized字体 . 但是，我无法找出百分比值的引用应该是什么 . 我明白这是'the same size in all browsers' . 我也读过这个，例如：

百分比（％）：百分比单位与“em”单位非常相似，除了一些基本差异 . 首先，当前的字体大小等于100％（即12pt = 100％） . 使用百分比单位时，您的文本仍可完全扩展到移动设备和可访问性 .

资料来源：http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

但是如果你说"ie 12 pt = 100%"，那么这意味着你首先必须定义 font-size: 12pt . 它是如何工作的？您首先在绝对度量中定义大小，然后将其称为'100%'？没有多大意义，因为许多样本说它有用：

body {
  font-size: 100%;
}

所以通过这样做，相对于字体大小是什么？我注意到我在屏幕上看到的尺寸因每种字体而异 . 例如，Arial看起来比Times New Roman更大 . 另外，如果我这样做，体型= 100％，这是否意味着它在所有浏览器上都是一样的？或者只有我首先定义一个绝对值？

UPDATE, SAT JUL 23

我到了那里，但请耐心等待 .

因此，如果我理解正确，％值与默认浏览器字体大小相关 . 嗯，这很好，但再次给我几个问题：

  • 对于每个浏览器版本，此标准大小是否始终相同，或者它们是否因版本而异？

  • 我！发现（见下图）Google Chrome的设置（以前从未看过这个！），我看到标准的"serif"，"sans-serif"和"monospace"设置 . 但是我如何解释其他字体呢？假设我定义了 font: 100% Georgia; ，浏览器的大小是多少？它是否会查找serif的标准大小，或者"Georgia"字体是浏览器的标准大小

  • 在几个网站上我read如 Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today . 但是从我现在所学的内容来看，我认为你应该在可调整大小的文本（使用％或em，就像他们在这个引用中推荐的那样）或者使用'accurate, consistent font-sizes across browsers'（通过使用px或pt作为基础）之间进行选择 . 它是否正确？

Google设置：

Google Chrome Settinsg

这就是我认为如果你没有用绝对值定义大小的话 .

enter image description here

css font-size

9 回答

  • 3

    对于Firefox，浏览器默认值为16pt，您可以通过进入Firefox选项，单击“内容”选项卡以及检查字体大小来查看 . 您也可以为其他浏览器执行相同的操作 .

    我个人喜欢控制我的网站的默认字体大小，因此在每个页面中包含的CSS文件中，我将设置BODY默认值，如下所示：

    body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

    现在我所有HTML标签的字体大小将继承14px的字体大小 .

    假设我想要一个所有div的字体大小比body大10％，我只是这样做：

    div {
    font-size: 110%
}

    现在任何查看我的页面的浏览器都会自动使所有div比正文大10％，这应该是15.4px .

    如果我希望所有div的字体大小减小10％，我会：

    div {
    font-size: 90%
}

    这将使所有div的字体大小为12.6px .

    此外，您应该知道，由于继承了font-size，每个嵌套div的字体大小将减少10％，因此：

    <div>Outer DIV.
    <div>Inner DIV</div>
</div>

    内部div的字体大小为11.34px（12.6px的90％），这可能不是预期的 .

    这有助于解释：http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

    回复于
  • 9

    我的理解是，当字体设置如下

    body {
  font-size: 100%;
}

    浏览器将根据该浏览器的用户设置呈现字体 .

    该规范称％已呈现

    相对于父元素的字体大小

    http://www.w3.org/TR/CSS1/#font-size

    在这种情况下，我认为这意味着浏览器的设置 .

    回复于
  • 82

    font-size 属性值的百分比是相对于 the parent element’s font size 的 . CSS 2.1非常清楚地表达了这种模糊和混乱（指“继承的字体大小”），但CSS3文本says .

    body 元素的父元素是根元素，即 html 元素 . 除非在样式表中设置，否则根元素的字体大小取决于实现 . 它通常取决于用户设置 .

    在许多情况下设置 font-size: 100% 是没有意义的，因为如果没有样式表设置自己的字体大小，则元素会继承其父级的字体大小（导致相同的结果） . 但是，覆盖其他样式表（包括浏览器默认样式表）中的设置可能很有用 .

    例如， input 元素通常具有设置浏览器样式表，使其默认字体大小小于复制文本的字体大小 . 如果您希望使字体大小相同，则可以进行设置

    输入{font-size：100％}

    对于 body 元素，逻辑冗余设置 font-size: 100% 经常被使用，因为它被认为有助于防止一些浏览器错误（在浏览器中可能已经失去了它们的意义） .

    回复于
  • 0

    它与默认浏览器字体大小相关，除非您使用pt或px中的值覆盖它 .

    回复于
  • 3

    对不起，如果我迟到了，但在你的编辑中你会对 font: 100% Georgia 做一个评论，其他答案没有回复 .

    font: 100% Georgia 和 font-size:100%; font-family:'Georgia' 之间存在差异 . 如果这是所有简写方法，那么font-size部分将毫无意义 . 但它也将很多属性设置为默认值：行高为 normal （或大约为1.2），同样为样式（非斜体）和权重（非粗体） .

    就这样 . 其他答案已经提到了其他一切 .

    回复于
  • 1

    正如您所说的那样， font-size: 100%; 在所有浏览器中都不会呈现相同的效果 . 但是，您将在CSS文件中设置字体，因此在所有浏览器中都是相同的（或后备） .

    我相信 font-size: 100%; 在与基于 em 的设计相结合时非常有用 . 正如this article所示，这将创建一个非常灵活的网站 .

    什么时候有用？当您的网站需要适应访客的意愿 . 例如，一位老人将其默认字体大小设置为24像素 . 或者是具有较大分辨率的小屏幕的人增加了他的默认字体大小，因为他不得不眯眼 . 大多数网站都会破坏，但基于em的网站能够应对这些情况 .

    回复于
  • 3

    相对于为该字体定义的默认大小 .

    如果有人在Web浏览器上打开您的页面，则会使用默认字体和字体大小 .

    回复于
  • 15

    至于我的理解，它可以帮助您的内容根据不同的字体系列和字体大小进行调整 . 这样可以使您的内容可扩展 . 至于继承字体大小的问题，我们总是可以通过为元素提供特定的字体大小来覆盖 .

    回复于
  • 0

    根据 ALL THE SPECS DATING BACK TO 1996 ， font-size 上的百分比值是指父元素的（计算的）字体大小 .

    <style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

    就这么简单 .

    如果 div 声明了一个相对的字体大小，比如 em ，或者更糟糕的是，另一个百分比？见上面的“计算” . 无论相对单位转换为什么绝对单位 .

    剩下的唯一问题是当你在没有父元素的根元素上使用百分比值时会发生什么：

    html {
  font-size: 62.5%; /* 62.5% of what? */
}

    在这种情况下，请参阅此问题的the “duplicate” . TLDR：根元素的百分比是指浏览器的默认字体大小，每个用户可能有所不同 .

    参考文献：

    回复于

相关问题