CSS3 Tutorial-Fonts

Front-end development programmers, how much do you know about using CSS3 tutorial-@font-face to implement personalized fonts? Today we will introduce CSS3 @font-face to you. If you are interested, you can learn more.

In web pages, we can use the font-family property of CSS to define fonts. However, whether the defined font can be displayed correctly on the user's computer depends on whether the user's computer has the font installed. We often see some foreign personal websites using very beautiful fonts, but these fonts are usually not installed on the user's computer, so it cannot be achieved using the font-family attribute. Today we will introduce the use of @font- face implements personalized fonts.

CSS3 @font-face Rules:

Prior to CSS3, web designers had to use fonts that were already installed on the user’s computer.

With CSS3, web designers can use any font they like.

When you find or purchase the font you want to use, you can store the font file on the web server, and it will be automatically downloaded to the user's computer when needed.

Your "own" font is defined in the CSS3 @font-face rule.

@font-face supports the following attributes:

font-family: Set the font name of the text.

font-style: Set text style.

font-variant: Set whether the text is uppercase or lowercase.

font-weight: Set the thickness of the text.

font-stretch: Set whether the text is stretched horizontally.

font-size: Set the text font size.

src: Set the relative path or absolute path of the custom font.

Browser support:

##Firefox, Chrome, Safari and Opera support .ttf (True Type Fonts) and .otf (OpenType Fonts) type fonts .

Internet Explorer 9+ supports the new @font-face rule, but only supports .eot type fonts (Embedded OpenType).

Note: Internet Explorer 8 and earlier do not support the new @font-face rules.

Use the font you need:

In the new @font-face rule, you must first define the name of the font (such as myFirstFont) and then point to the font file.

To use a font for an HTML element, reference the name of the font (myFirstFont) via the font-family attribute:

Example:

<style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>

Use bold font:

You must add another @font-face containing descriptor for bold text:

Example:

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’); /* IE9+ */
font-weight:bold;
}

The file "Sansation_Bold.ttf" is another font file, It contains the bold characters of the Sansation font.

As long as the text with font-family "myFirstFont" needs to be displayed as bold, the browser will use this font.

In this way, we can set many @font-face rules for the same font.

CSS3 font descriptors:

The following table lists all font descriptors that can be defined in the @font-face rule:

DescriptorValueDescriptionfont-familynameRequired. Specifies the name of the font. srcURLRequired. Defines the URL of the font file. font-stretchOptional. Defines how to stretch the font. The default is "normal". font-styleOptional . Define the style of the font. The default is "normal". font-weight

	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded
	ormal italic oblique
	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the weight of the font. The default is "normal".
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters supported by the font. The default is "U+0-10FFFF".

The above is the content of CSS3 tutorial-fonts. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!