I'm talking to my girlfriend. Programming CSS Series (3) How to set the font type, size, color, how to use the Firefox Firebug plugin to view the Web page font

First, CSS how to set the font type, size, color

When designing a Web page, it is generally necessary to set the body font to allow other tags to inherit the body font, which is especially handy, but the title tag H1 to H6 and the form label (input type) are not inherited body font attributes, their fonts need to be set separately.

1, create a new Web page a.html, copy the following code in.

"text/css">Body {font-family: Microsoft Ya hei, song body; Font-size:1em;color: #f00;} </style>    CSS Settings font type, size, color </p></body>

2, using the browser to open the page a.html, you can see the following:

3, set the type of font

The type of font is set by the following code:

font-family: Microsoft Ya hei, Arial, ' New York ';

Font-family translation for Chinese is the "font family", that is, to tell the browser, priority to use which font, who ranked in the front, first use this font, here is "Microsoft ya Black";

Multiple fonts use a comma interval, with a space or #, $ in the font name, plus single or double quotes.

If the operating system "Microsoft Black", the XP system does not have this font, then you will use "song", if there is no "Arial", will be used in the system default font, but the operating system is generally "Arial", and, if not to the page set font type, The Web page is displayed according to the default font in the operating system.

4, set the size of the font

The font size is set by the following code:

Font-size:1em;

Font-size translated to Chinese is "font size", which is generally px (pixel) or em (font height).

China's many websites default font is 12px, and many people use IE browser, like IE6, users can not change the size of the page font, and now the mainstream browser, just hold down the CTRL, the rolling pulley can be zoomed out of the page.

Unit em is a relative font height, the general browser defaults to 16PX, it should be noted that EM will inherit the parent element's font size.

For example, set the body font size to 1em,p font size is 0.8em, then convert to pixels, the actual unit of P tag is 1 * 0.8 * 16px = 12.8px.

However, in order to simplify the conversion of EM and PX, the general setting of body font-size is 62.5%, and then use EM to set the font size of other labels, so that the EM conversion to PX only need to be multiplied by 10, such as 1em = 1 * 62.5% * 16px = ten px

Many people recommend using EM as a Web font unit with 2 benefits, but my practice tells me it doesn't seem to matter.

(1) When the font is larger or smaller for IE6, all fonts can be scaled up and down. However, fewer people use IE6, now the mainstream browser, hold down CTRL, slide the pulley, you can zoom out.

(2) by modifying the size of the body, you can modify all font sizes proportionally, because the body is the benchmark for other fonts. This is usually set to the body size, and then set the other label size, at this time, if you change the size of the body, the size of the other labels will change.

5, set the font color

Set the color of the font through the following code:

Color: #f00;

Color is the meaning of colors, and color is used to set the foreground color of a label, which is the color of the element text.

Its value is generally expressed using the # Plus 16 color value.

Second, how to use the Firebug plugin Firefox browser to view the font of the page?

Firefox has a lot of plug-ins, which plug-in Firebug on the Web debugging, program development has a very important role, the following is how to use Firebug to view the fonts used in the page.

1, download Firefox browser.

In the Baidu search box, enter "Firefox browser", in general, ranked first is the latest version of the software, such as, select "Normal Download", after the download is complete, installation can be.

2. Open the Add-ons window.

After installing Firefox, under the browser Close button (fork), is a button "open menu", click, select "Add-ons", and then open a new window.

3, Search Firebug

In the search box in the upper-right corner, enter "Firebug" and click Search. Locate the Firebug and click Install. After the installation is complete, close the browser and reopen it.

4, using Firebug

After opening the Firefox browser, click on the keyboard F12, you will find the original page is divided into two parts, the following part is the Firebug work window.

Use Firebug be sure to remember the shortcut keys, F12, click, Firebug will bounce out; Click again, it will disappear.

Click "Viewer", click "After the calculation", and then you can see the Baidu home page using the font is font-family:arial;

5, Font-family:arial;

CSS set font type through the Font-family property to set, generally set to "Arial, Microsoft Ya Black" and so on font, Arial is Microsoft's many software use of a font.