CSS3: The sixth chapter

Sixth Chapter text formatting

The 1.font-family property sets the font. Use alternate fonts in addition to specifying the font you want. For example:

p{font-family:arial, Helvetica, Sans-serif;}

If the name of the font contains multiple words, you must enclose them in double quotation marks ("").

2. Serif fonts, suitable for lengthy text messages.

Sans-serif fonts look clean and tidy so they are often placed on the title.

monospaced fonts are often used to display computer code. Each letter in the font is equal width.

• Other common fonts: Arial Black, Arial Narrow, Impact

3. Font type:

· EOT: only applicable to IE browser.

·. TTF or. OTF: Is the most commonly used font format in your computer.

· WOFF: is a relatively new font format.

· SVG: Not a font format.

4. Use fonts: Once you have downloaded the correct font text, you are ready to use it. First copy these files to the directory where you saved the Web site files on your computer, and then add the @font-face command to the style sheet to tell the browser where to download the font, such as:

@font-face {

Font-family: "League Gohic";

Src:url (' Fonts/league_gothic-webfont.ttf ');

}

5. When applying a font to a style, if you want to use the league Gothic font for all H1 tags, you can display it as follows:

H1 {

Font-family: ' League Gothic ';

Font-weight:normal;

}

Set Font-weight to normal to tell the browser to use only the original League Gothic font.

Assuming you want to use league Gothic all the different font formats on your site, you can rewrite the code as follows:

@font-face{

Font-family: ' League Gothic '; Defines the name of the font

Src:url (' Fonts/league_gothic-webfont.eot '); For IE9, but only if it is in compatibility mode.

Src:url (' Fonts/league_gothic-webfont.eot? #iefix ')//Specify multiple font types,? #iefix是为了兼容更多的IEbug, for IE6~IE8.

Format (' Embedded-opentype '),//indicates font formatting, and adds this to each URL after a different font format.

URL (' fonts/league_gothic-webfont.woff ') format (' Woff '),

URL (' Fonts/league_gothic-webfont.ttf ') format (' TrueType '),

URL (' fonts/league_gothic-webfont.svg ') format (' SVG ');

}

Chrome will download the first font file that can be understood, so font file sorting is important, generally woff fonts are preferred, because it is small and fast to download.

6. A simple way to add bold italic:

• Add font-weight and Font-style attributes to the @font-face directive.

You need to use 4 @font-face instructions to cover all variants of bold, italic, and normal text.

For example: styles that do not use bold and italic are:

@font-face {

font-family: ' Ptsans ';

Src:url (' Ptsansregular.eot ');

Src:url (' Ptsansregular.eot? #iefix ')

Format (' Embedded-opentype '),

URL (' ptsansregular.woff ') format (' Woff '),

URL (' Ptsansregular.ttf ') format (' TrueType '),

URL (' ptsansregular.svg ') format (' SVG '),

Font-weight:normal;

Font-style:normal;

}

The italic version that uses the font is:

@font-face {

font-family: ' Ptsans ';

Src:url (' Ptsansitalic.eot ');

Src:url (' Ptsansitalic.eot? #iefix ')

Format (' Embedded-opentype '),

URL (' ptsansitalic.woff ') format (' Woff '),

URL (' Ptsansitalic.ttf ') format (' TrueType '),

URL (' ptsansitalic.svg ') format (' SVG '),

Font-weight:normal;

Font-style:italic;

}

The bold version that uses the font is:

@font-face {

font-family: ' Ptsans ';

Src:url (' Ptsansbold.eot ');

Src:url (' Ptsansbold.eot? #iefix ')

Format (' Embedded-opentype '),

URL (' ptsansbold.woff ') format (' Woff '),

URL (' Ptsansbold.ttf ') format (' TrueType '),

URL (' ptsansbold.svg ') format (' SVG '),

Font-weight:bold;

Font-style:normal;

}

The bold and italic versions that use this font are:

@font-face {

font-family: ' Ptsans ';

Src:url (' Ptsansbolditalic.eot ');

Src:url (' Ptsansbolditalic.eot? #iefix ')

Format (' Embedded-opentype '),

URL (' ptsansbolditalic.woff ') format (' Woff '),

URL (' Ptsansbolditalic.ttf ') format (' TrueType '),

URL (' ptsansbolditalic.svg ') format (' SVG '),

Font-weight:bold;

Font-style:italic;

}

7. Add bold italic and support IE8: Each variant must have a unique name.

For example: Do not use bold, italic is:

@font-face {

font-family: ' Ptsans ';

Src:url (' Ptsansregular.eot ');

Src:url (' Ptsansregular.eot? #iefix ')

Format (' Embedded-opentype '),

URL (' ptsansregular.woff ') format (' Woff '),

URL (' Ptsansregular.ttf ') format (' TrueType '),

URL (' ptsansregular.svg ') format (' SVG '),

Font-weight:normal;

Font-style:normal;

}

The italic version that uses the font is:

@font-face {

font-family: ' Ptsansitalic ';

Src:url (' Ptsansitalic.eot ');

Src:url (' Ptsansitalic.eot? #iefix ')

Format (' Embedded-opentype '),

URL (' ptsansitalic.woff ') format (' Woff '),

URL (' Ptsansitalic.ttf ') format (' TrueType '),

URL (' ptsansitalic.svg ') format (' SVG '),

Font-weight:normal;

Font-style:italic;

}

The bold version that uses the font is:

@font-face {

font-family: ' Ptsansbold ';

Src:url (' Ptsansbold.eot ');

Src:url (' Ptsansbold.eot? #iefix ')

Format (' Embedded-opentype '),

URL (' ptsansbold.woff ') format (' Woff '),

URL (' Ptsansbold.ttf ') format (' TrueType '),

URL (' ptsansbold.svg ') format (' SVG '),

Font-weight:bold;

Font-style:normal;

}

The bold and italic versions that use this font are:

@font-face {

font-family: ' Ptsansbolditalic ';

Src:url (' Ptsansbolditalic.eot ');

Src:url (' Ptsansbolditalic.eot? #iefix ')

Format (' Embedded-opentype '),

URL (' ptsansbolditalic.woff ') format (' Woff '),

URL (' Ptsansbolditalic.ttf ') format (' TrueType '),

URL (' ptsansbolditalic.svg ') format (' SVG '),

Font-weight:bold;

Font-style:italic;

}

8. Color Indication:

(1) hexadecimal indicates color. Format: #ffffff #后面跟着六个0 ~f value.

(2) RGB represents the color value. This color value consists of 3 numbers, each of which represents a hue (red, green, blue), which is expressed as a percentage (0%~100%), or as a number between 0~255. For example, set the color of the text to white:

Color:rgb (100%,100%,100%);

Or

Color:rgb (255,255,255);

(3) Rgba:rgba represents red, Green, Blue, and Alpha.

For example: Color:rgba (255,100,5,.5);

9. Format words and Letters:

(1) Capitalization: text-transform:uppercase;

(2) Lowercase: text-transform:lowercase;

(3) Capital of first letter: Text-transform:capitalize;

(4) Small capital letters: text-transform:small-caps;

10. Modification of the text:

(1) Underline: text-transform:underline;

(2) Underline: Text-transform:overline;

(3) Middle line: Line-through.

(4) You can combine multiple properties to decorate text, such as adding underscores and underscores to text: Text-transform:underline overline.

11. Letter spacing and Word spacing:

(1) Letter spacing: letter-spacing; Positive increases letter spacing, negative values decrease letter spacing.

(2) Word spacing: word-spacing;

12. Add a shadow to the text:

The Text-shadow property requires four aspects of information: the horizontal offset, the vertical offset, the blur of the shadow, and the color of the shadow. You can also add multiple shadows to create complex effects, with multiple shadows separated by commas. This effect only works well above IE10.

13. Format the entire paragraph:

(1) Adjust the line spacing: line-height;

(2) to its text: text-align;

(3) First line indent: text-indent;

(4) control the distance between paragraphs:margin-top&margin-bottom; for example, to eliminate gaps between paragraphs:

p{

margin-top:0;

margin-bottom:0;

}

14. Define a style for the list:

(1) to the Bullets and project ordinal positioning: List-style-position:outside, inside. Padding-left can adjust the distance between bullets and text, and use this property only if the List-style-positon property value is outside or if list-style-position is not used.

(2) Graphical bullets: List-style-image:url (relative to the picture path of the style sheet); The Background-image property allows you to position the picture.

CSS3: The sixth chapter