Question

我对CSS字体大小有疑问。我有一个CSS代码，它的字体大小为200％。但与此同时，我已指定文本正文的字体大小为12pt。当我将文本正文的字体大小更改为8pt时，“它上面没有多少”这一行变小了！当然改变正文字体大小不应该覆盖这个特定行的字体大小（我特别要求它是200％。）有人也可以告诉我当我改变BODY字体大小时这行的新字体大小是多少到8pt？是200％* 8/12 = 133％。它是如何工作的？我是一个绝对的初学者。

    <!DOCTYPE html>
    <head>
    <link rel="stylesheet" href="mystyle.css">
    <style>
    p.bigger{font-size:200%}
    p.smaller{font-size:10pt}
    #intro{color:red}
    body{font-size:12pt}
    p{color:blue; font:Arial, sans-serif}
    h1{color:green}
    </style>
    </head>
    <body>
    <h1>Introduction</h1>
    <p id="intro">Welcome to my page</p>
    <p class="bigger">There is not much on it</p>
    <p class="smaller">Except this</p>
    <ul>
    <li>Short list</li>
    </ul>
    <h1 style="font-style:italic">Contact</h1>
    Here is my address
    </body>
    <html>

Answer 1

这正是它的工作原理，但另一种写作方式是使用：

2em

与200％相同

Answer 2

设置字体大小时，您应该使用em代替percentages。

这是因为em值将继承parent值（在本例中为正文）。

因此，与font-size:2em或200%相比，8px之类的内容相当于12px。

body { font-size:8px; }

thisFontSize { font-size:2em; }

thisFontSize将等于16px。

OR

body { font-size:12px; }

thisFontSize { font-size:2em; }

thisFontSize将等于24px。

如果您需要2em大于body以外的其他内容，则可以将其定义为此类。玩这个小提琴，因为它可能更有意义。

JSFiddle：http://jsfiddle.net/SinisterSystems/7KR9t/

Answer 3

百分比是相对值，而pt / px是绝对值。因此，在您的情况下，您获得12pt（24pt）的200％或8pt（16pt）的200％。所以你应该给p.bigger一个绝对值，例如。 p.bigger { font-size: 16pt }，因此在更改正文字体大小时，它只会影响具有百分比的元素或未分配字体大小的元素（在您的示例中为h1）。请记住，body包含所有元素，如果它位于样式表中的h1或p之后无关紧要，但它确实应该在开头。

另外，考虑使用标题和副标题的标题标记，而不是仅仅针对文本大小过分依赖于不同的类。检查this示例。

另请参阅有关可用测量单位的this文章。

Answer 4

当您在元素的font-size值中使用百分比时，它将引用父元素的字体大小值。

因此，.bigger段落的父元素为body，因此最终的font-size将为8pt * 2 = 16pt

CSS字体大小冲突

4 个答案:

OR

JSFiddle：http://jsfiddle.net/SinisterSystems/7KR9t/