用 CSS 理解字体（谷歌字体）

Question

I am always struggling when it comes to the using fonts and their sizes.. I cannot get the desired style because I probably dont understand the CSS properties.. I would appreciate if someone can please clarify the following CSS codes..

@import url(http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic);

the above line is importing "Lato" font, but why so many options using COMMAS ? and how can I use desired weight of font with above scenario..

font-weight: 300;
font-size:30px;

what actually is the font weight, isnt it making it for bold ?

font: 700 10px/20px Helvetica;

What does this line means ? why using a divider ? 10px/20px ?

Answer 1

I'll try to answer these as best I can.

1. The commas are separating all of the various font weight and styles that you're importing. The more you import, the higher your load times. It's best to only import the styles that you need. You can select/deselect what you want on the actual Google Fonts site.
2. The commas are separating all of the various font weight and styles that you're importing. The more you import, the higher your load times. It's best to only import the styles that you need. You can select/deselect what you want on the actual Google Fonts site.
3. The '10px/20px' means 'FONTSIZE / LINEHEIGHT'. It lets you do both definitions in a single line.