CSS字母间距和比例字体

Question

So I know that my question is pretty technical, but basically I would like to know specifically how the following CSS affects the display of text in <p> tags.

p {
letter-spacing:2px;
font-family:"Georgia";
}

I know that Georgia is a proportional font, that the designer has spent time crafting the spaces between letters to make the font more readable and visually pleasing.

But my question is how does the letter-spacing property affect this proportionality? Does this code add two pixels onto the spacing already defined by the type designer, or does it reset that spacing to two pixels?

Answer 1

This property is additive to what the font would normally use. So, 1px will increase it by a pixel. Sitepoint calls it "extra" space (with negative values allowed).

The W3C docs say the same thing:

"This value indicates inter-character space in addition to the default space between characters. Values may be negative..."

Answer 2

It is in addition to any default spacing.

See: https://developer.mozilla.org/en-US/docs/CSS/letter-spacing

Answer 3

From my experiment on Firefox on OSX, using a kerned font (Arial) as opposed to Georgia which does not appear to have kerning on my machine, I can testify that the spacing is in addition to existing spacing, and kerning, and can be either additive, or subtractive.

It is also worth mentioning that different browsers and operating systems replace fonts, and handle them slightly differently to each other, making it impossible to predict 100% how any font will be rendered.