CSS: 100% font size

 

There are many articles and questions about percentage-sized vs other-sized fonts. However, I can not find out WHAT the reference of the percent-value is supposed to be. I understand this is 'the same size in all browsers'. I also read this, for instance:

Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (ie 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

Source: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

But if you say "ie 12 pt = 100%", then it means you first have to define font-size: 12pt . Is that how it works? You first define a size in an absolute measure, and then refer to this as '100%'? Does not make a lot of sense, as many samples say it is useful to put: 

body {
  font-size: 100%;
}

So by doing this, WHAT is the font size relative to? I notice that the size I see on my screen differs for every font. Arial looks way bigger than Times New Roman, for instance. Also, if I would just do this, body size = 100%, would that mean that it will be the same on all browsers? Or only if I first define an absolute value?

UPDATE, SAT JUL 23

I am getting there, but please bear with me.

So, the % value relates to the default browser font size, if I understand correctly. Well, that is nice but gives me again several other questions:

  • Is this standard size always the same for every browser version, or do they vary between versions?
  • I ! found (see image below) the settings for Google Chrome (never looked at this before!), and I see standard "serif", "sans-serif" and "monospace" settings. But how do I interpret this for other fonts? Say I define font: 100% Georgia; , what size will the browser take? Will it look up the standard size for serif, or has the "Georgia" font a standard size for the browser
  • On several websites I read things like 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 . But from what I am learning now I believe that you should actually choose between either resizable text (using % or em, like what they recommend in this quote), or having 'accurate, consistent font-sizes across browsers' (by using px or pt as a base). Is this correct?

    • Google Settings:

    Google Chrome Settinsg

    This is how I think things could look like if you do not define the size in absolute values.

    The browser default which is something like 16pt for Firefox, You can check by going into Firefox options, clicking the Content tab, and checking the font size. You can do the same for other browsers as well.

    I personally like to control the default font size of my websites, so in a CSS file that is included in every page I will set the BODY default, like so: 

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

    Now the font-size of all my HTML tags will inherit a font-size of 14px.

    Say that I want a all divs to have a font size 10% bigger than body, I simply do: 

    div {
    font-size: 110%
}

    Now any browser that view my pages will autmoatically make all divs 10% bigger than that of the body, which should be something like 15.4px.

    If I want the font-size of all div's to be 10% smaller, I do: 

    div {
    font-size: 90%
}

    This will make all divs have a font-size of 12.6px.

    Also you should know that since font-size is inherited, that each nested div will decrease in font size by 10%, so: 

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

    The inner div will have a font-size of 11.34px (90% of 12.6px), which may not have been intended.

    This can help in the explanation: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

    My understanding is that when the font is set as follows 

    body {
  font-size: 100%;
}

    the browser will render the font as per the user settings for that browser.

    The spec says that % is rendered

    relative to parent element's font size

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

    In this case, I take that to mean what the browser is set to.

    A percentage in the value of the font-size property is relative to the parent element's font size . CSS 2.1 says this obscurely and confusingly (referring to “inherited font size”), but CSS3 Text says it very clearly.

    The parent of the body element is the root element, ie the html element. Unless set in a style sheet, the font size of the root element is implementation-dependent. It typically depends on user settings.

    Setting font-size: 100% is pointless in many cases, as an element inherits its parent's font size (leading to the same result), if no style sheet sets its own font size. However, it can be useful to override settings in other style sheets (including browser default style sheets).

    For example, an input element typically has a setting in browser style sheet, making its default font size smaller than that of copy text. If you wish to make the font size the same, you can set

    input { font-size: 100% }

    For the body element, the logically redundant setting font-size: 100% is used fairly often, as it is believed to help against some browser bugs (in browsers that probably have lost their significance now).

    链接地址: http://www.djcxy.com/p/15332.html

    上一篇: 使用百分比字体大小？

    下一篇: CSS：100％的字体大小