CSS3 Tutorial-Fonts

Source: Internet
Author: User
Front-end developers, how much do you know about using CSS3 Tutorial-@font-face for personalized fonts? Today we introduce you to CSS3 @font-face, interested to understand the next.

In the Web page, we can use the CSS Font-family property to define the font, but the definition of the font on the user's computer can be rendered correctly depends on whether the user's computer installed the font. We can often see some foreign personal sites using very beautiful fonts, and these fonts are usually not installed in the user's computer, so with the font-family attribute can not be implemented, today we introduce the use of @font-face to implement personalized fonts.

CSS3 @font-face Rules:

Before CSS3, the web designer must use fonts that have been installed on the user's computer.

Css3,web designers can use any font they like.

When you find or buy the font you want to use, you can store the font file on the Web server, which is 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 properties:

Font-family: Sets the font name of the text.

Font-style: Sets the text style.

Font-variant: Sets whether the text is case-sensitive.

Font-weight: Sets the thickness of the text.

Font-stretch: Sets whether the text is stretched horizontally.

Font-size: Sets the text font size.

SRC: Sets the relative path or absolute path of a custom font.

Browser support:

Firefox, Chrome, Safari, and Opera support. TTF (True type Fonts) and. OTF (OpenType Fonts) types of fonts.

Internet Explorer + + supports the new @font-face rules, but only the. EoT type of font (Embedded OpenType) is supported.

Note: Internet Explorer 8 and earlier versions 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 fonts for HTML elements, refer to the name of the font (Myfirstfont) through the Font-family property:

Instance:

<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 that contains a descriptor for bold text:

Instance:

@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 that contains the bold characters of the Sansation font.

The browser will use this font as long as the text font-family for "Myfirstfont" needs to appear bold.

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

CSS3 Font Descriptor:

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

Descriptor Value Describe
Font-family Name Necessary. Specifies the name of the font.
Src Url Necessary. Defines the URL of the font file.
Font-stretch

Normal

Condensed

Ultra-condensed

Extra-condensed

semi-condensed

Expanded

Semi-expanded

extra-expanded

ultra-expanded

Optional. Defines how the font is stretched. The default is "normal".
Font-style

Ormal

Italic

Oblique

Optional. Defines the style of the font. The default is "normal".
Font-weight

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 CSS3 tutorial-the font content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.