Geek asks and answers

Consolal smaller Verdana

I am writing a webpage where I want to use one font for plain text and another for code, so I have the following CSS:

body {
    font-family:Verdana, sans-serif;
    font-size:100%;
}

code, pre {
    font-family:Consolas, monospace;
}

This works, except that the text of the Console comes out significantly less than the text of Verdana. I can fix this by adding font-size:1.2em;to the settings code, pre, but it seems like hacks, especially because the number was not received from anything other than trial and error.

Is this something like a quirk of specific fonts, or am I doing something wrong?

+3
source share
4 answers

, , , . " ", , , , .

CSS3 font-size-adjust. , ; , Firefox.

+4

CSS, , , , "em square" "em box", em units.

- , "", M , . , em. em- M, em . , M.

, em, . , em , , , . , , .. , . , .

+2

. , ( ). , "H" , "H" . .

. Verdana , Lucida Console, , . Consolas (!), "C" , , Cambria ( ) Calibri Candara ( sans-serif).

( , ), , - font-size: 90% on code pre . - , monospace, , . -

pre, code, samp, kbd, tt { font-size: 100%; }
+1

Fonts

, - . 12pt. , , 20% - . pre, em - , 0.9em, pre 0.9em, 12pt * 0.9 * 0.9 = 9.72pt

If you try to match only the height, but ignore the width, then 1.16em looks right, and this is really a font quirk, and you're not doing anything wrong.

Edit

It seems that you are not doing anything wrong =) To the left of the violinist, to the right of WordPad

enter image description here

0
source

More articles:


All Articles