CSS font attributes

Author: jorux/bluecssr posted on: September 11,200 6 filed under: web design comments: 18 responses keywords: CSS, tutorial fontsize: + increase-decreaseedit
The previous section mainly introduced CSS's control over color and text attributes. This section describes CSS's control over attributes such as font and background.

Font: The font attributes controlled by CSS include font-family, font-style, font-variant, font-weight, font-size.

1. font-family: consists of family-names and generic families. first, let's look at an example. For example, you can see the following code to view the CSS file on the jorux.com homepage:

[Copy to clipboard]

Code:

Body {
Font: normal 12px/1.5 Georgia, sans-serif;
Text-align: left;
Background: #444 URL (images/bodybg.jpg) Repeat-y;
}

The highlighted blue part is the font attribute value, which can be abbreviated:

[Copy to clipboard]

Code:

Font-weight: normal;
Font-size: 12px;
Line-Height: 1.5;
Font-family: Georgia, sans-serif;

Line-height does not belong to the font attribute, but can be abbreviated to the font attribute. now let's look at the font-family part of the last row. "Georgia" is the font name (including simhei, Arial, verdana, etc.), "Sans-serif" is the name of the word group (including serif ), sans-serif and monospace ).

Because the built-in Chinese Character Fonts in windows are extremely limited. however, Chinese Windows systems generally support (default, simsun), simhei, and kaiti_gb2312 ). let's take a look at these Chinese Font types (note these Chinese names. kaiti_gb2312 is the English font of the simplified font, and Firefox has poor support for Chinese font ):

Default

Chinese people may be confused when they see western Chinese characters, but just like the English names they encounter when learning English, the performance and spelling of some common Chinese characters must be mastered. For Chinese learners, currently, only the following types of English fonts are recommended:

Arial verdana Georgia courier (it doesn't really make sense if you don't share your knowledge)

The general usage of these fonts is as follows:

1. arial: it is currently the most popular text font. Almost all Web2.0 sites (such as Google, Flickr, And Wikipedia) Use Arial as the text or even the title Font. it is characterized by strong affinity and hard reading;

2. verdana: in 1996, Microsoft invited top-level font designers to produce fonts for two years. The fonts are provided to Windows users for free. similar to Arial, it is the most widely used font and can be seen almost anywhere;

3. georgia: This rising star has gradually replaced Times New Roman's core position in the serif group due to its fancy linefeed (post description), favored by many web designers. the title of this website also uses the Georgia font.

4. Courier: affiliated to the monospace word group. Because the letter width is uniform, courier is generally used to control the word length strictly, such as Web navigation bar and newspaper (print ).

There are so many English fonts, but they all belong to three word groups: Serif, sans-serif, and monospace. because of the characteristics of English, different from square characters (Chinese characters), the width of English letters is not equal, which makes the publishing industry more difficult to typeset, therefore, monospace was invented ).

The word group and font diagram are as follows:

It is necessary to explain the differences between serif and sans-serif. "sans" comes from ancient French, meaning "without", that is, "Non ". "serif" comes from Dutch and is translated as a linefeed. It refers to the modifier line at the corner or endpoint of a letter ,:

Therefore, non-equi-width word groups can be divided into serif and sans-serif. verdana and Arial belong to the same group.

The selection of word groups and fonts is actually very personalized. Readers can flexibly match them according to their preferences, but the general principle is not to select some rare fonts, if the visitor does not have such a font, it will be contrary to your design intent. (If you do not share knowledge is meaningless http://www.yidabu.com)

For example, the attribute value of font-family is as follows:

Font-family: verdana, Arial, sans-serif;

The browser first looks for verdana fonts in the font library. If not, it looks for Arial fonts. If not, it selects other fonts in the Sans-serif text group.

2. Font-style: includes three attribute values: Normal, italic, and oblique. the CSS code is as follows:

Font-stye: normal;
Font-stye: italic;
Font-stye: oblique;

The performance is as follows:

Normal italic oblique

We can see that italic and oblique are both text skewed to the right, but the difference is that italic refers to italic, while oblique refers to Oblique text, for fonts without italics, the oblique attribute value should be used to achieve oblique text effects. It is mainly used for remarks that need to be different from the text.

3. font-variant: includes two attribute values: normal and small-caps. this attribute is rarely used by non-English users. small-caps refers to a small capital letter. It is a form of expression between an upper-case letter and a lower-case letter. The CSS code is as follows:

Font-variant: normal;
Font-variant: Small-caps)

The performance is as follows:

Normal small-caps

We can see that small uppercase letters are shorter than normal uppercase letters. To achieve this effect, you must use lowercase letters in HTML and font-variant in CSS: small-caps; can be automatically converted to small uppercase letters, otherwise it will be displayed as normal uppercase letters.

4. Font-weight: includes two types of attribute values: normal and bold. the blod attribute value refers to the bold. CSS code is as follows:

Font-weight: normal;
Font-weight: bold;

The performance is as follows:

Normal bold

5. font-size: used to control the font size attributes. The attribute values are measured in PX, PT, CM, mm, %, and Em. PT, cm, and mm indicate the absolute font size, px, %, Em is the unit of relative size. these two units have their own benefits. The advantage of absolute size units is that the original design style can be maintained no matter how the user's browser is set, but there are some reading barriers, users who are used to big fonts seem a little rigid. although the relative size unit has an advantage in readability, the webpage interface is easily dispersed by the increased font.

The Difference and usage of each unit are no longer explained here. For details, refer to length units.

Here, we only emphasize that if your webpage is mainly displayed on a computer screen, the first push PX is your preferred unit, because PX can accurately represent the position and size of elements on the screen. if your webpage is mainly used for printing, we recommend that you use the absolute unit Pt (1pt = 1/72 inch) as the preferred unit, regardless of the screen resolution, the Print size is the same. (If you do not share knowledge is meaningless http://www.yidabu.com)

Summary: Let's summarize the font attributes. If you want to make "font property" appear as 32px, the row height is 150%, bold, italic, the font is Georgia, and the word group is Serif, the Code is as follows:

Font-size: 32px;
Line-Height: 1.5;
Font-style: italic;
Font-weight: bold;
Font-family: Georgia, Serif;

Abbreviated:

Font: italic bold 32px/1.5 Georgia, Serif;

The performance is as follows:

Font Property

--------------------------------------------------------------------------------

Background: includes five attributes: Background-color, background-image, background-repeat, background-attachment, and background-position.

1. background-color: Specifies the background color. The attribute value has three forms: hexadecimal, color name, and RGB value. at present, the most common is "# + hexadecimal number ". for example, the Section background of the code displayed on this site is # eeeeee gray. The code and example are as follows:

Background-color: # eeeeee)

2. Background-image: Specifies the background image. Its attribute value is the address of the background image. The code and format are as follows:

Background-image: URL (http://jorux.com/back.png );

For example, there is a "new" icon before the title of the first article on the homepage of this site. The following code is displayed for viewing CSS:

# Homeheadline {
Color: #444;
Padding: 30px 68px 0 40px;
Margin: 0;
Background: URL (images/new.png) No-repeat 0 16px;
}
3. Background-repeat: indicates whether or not the background image is repeated and the repeat method. There are four attribute values: No-repeat, repeat, repeat-X, and repeat-y.

No-repeat: no matter the size of the background image, only a single background image is displayed, as shown in the "new" icon before the title of the first article on the homepage. The Code is as follows;

Repeat: indicates that the background image is repeatedly displayed horizontally and vertically;

Repeat-X: indicates that the background image is repeatedly displayed;

Repeat-y indicates that the background image is repeatedly displayed vertically. For example, you can view the CSS file on this site and see the following code:

Body {
Font: normal 12px/1.5 Georgia, sans-serif;
Text-align: left;
Background: #444 URL (images/bodybg.jpg) Repeat-y;
}
It can be seen that the background image bodybg.jpg is repeatedly displayed vertically, and increases with the increase of the page length. (If you do not share knowledge, it is meaningless http://www.yidabu.com)

4. background-Attachment: attach method of the background image. Two attribute values are available: Scroll (default attribute) and fixed. scroll indicates that the background image is scrolled along with the page, while the fixed attribute value indicates that the background image is fixed to a certain position in the browser and does not scroll along with the page. as shown in the following example, you can try to scroll this page to see the difference between the two figures, scroll on the left and fixed on the right (use IE to view the following demo) (If the knowledge does not share it is meaningless http://www.yidabu.com)

X x x x XX x x x x
5. background-position: Specifies the position attribute of the background image. the property value can be in three forms: percentage, location name, and specific value, as shown in (the blue part indicates the data from the left border, and the black part indicates the data from the top border ):

As you can see, there are three methods to place the background image in the upper left corner. The Code is as follows:

Background-position: 0% 0%;
Background-position: Top left;
Background-position: 0 0;

In fact, this attribute is not declared, that is, the default background image is displayed in the upper left corner. it is worth noting that when the attribute value is used as the location name, first write the data (top) from the upper border, and then write the data (left) from the Left Border ). when expressed as a percentage or a specific number, write it in turn. please take a closer look at the order of the blue and black parts.

Do not underestimate this attribute. in the creation of the navigation bar, this attribute will be a key means to achieve some dynamic changes (will be described in the following examples ).

Summary: Summarize the attributes of the background. If you want to make a background image behave as a fixed image, it is located in the upper right corner. The background color is # CCC. The Code is as follows:

Background-image: URL (http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg );
Background-color: # CCC;
Background-Attachment: fixed;
Background-position: Top right;
Background-repeat: No-Repeat;

Abbreviated:

Background: URL (http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg) # CCC fixed no-repeat top right;

The performance is as follows (use IE to watch the following demo): (it is meaningless if you do not share knowledge)

X x x x
--------------------------------------------------------------------------------

This article is complete.

I thought I could write a few more attributes. I didn't expect the font and background attributes to be written so long that they have reached the limit in both physical strength and spirit. Now I have written this article, and the rest will be updated later.

 

 

English font used on Blog

I usually don't pay much attention to this issue when writing blogs in English. All fonts used are the default Arial font, but I do not know that Arial font is the worst recognized font on the computer, such as uppercase I and lowercase L, it is almost unclear. There is also the chubby verdana font with poor aesthetic effects. I seem to have not found any foreign language books using these two fonts. If the Arial font is not a, it will not appear on the first font. I even think this font should be deleted.

In general, georigia fonts are good for English fonts used on web pages, and the recognition effect is good. Some foreign websites and blogs almost use these fonts. I also like this font, which is not only beautiful, but also suitable for reading.

Georigia can also use printed materials, but Garamond uses more popular text fonts, which nobody can say.