How to load external font files in css

In css, you can use the "@font-face" rule to load external font files, the syntax @font-face {font-family: font name; src: url (external font file path); [font -weight: thickness value];[font-style: style value];}".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 Computer.

In css, you can use the "@font-face" rule to load external font text.

@font-face is A module in CSS3 that mainly embeds user-defined web fonts into your web pages.

By using the @font-face rule, web designers no longer have to use any kind of "network security" Font.

In the @font-face rule, you must first define the font name (for example, myFirstFont) and then point to the font file.

Syntax rules for @font-face:

@font-face {
      font-family: 字体名称;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

• font-family: Font name: Custom font name (generally set to the introduced font name), which will be used in subsequent style rules Name to reference the font.

• src : Set the loading path and format of the font, separate multiple loading paths and formats by commas

  srouce : The loading path of the font, which can be an absolute or relative URL.

  format : The format of the font, mainly used for browser identification, generally has the following types - truetype, opentype, truetype-aat, embedded-opentype , avg, etc.

How to use external font files in css

1. First, download the font and place it in the font directory

2. Use the @font-face rule to introduce the font and give it an appropriate name

@font-face {
 font-family: 'fontnameRegular';
 src: url('fontname.eot');
 src: local('fontname Regular'),
        local('fontname'),
        url('fontname.woff') format('woff'),
        url('fontname.ttf') format('truetype'),
        url('fontname.svg#fontname') format('svg');
}

3. Use the font just defined

h1{font-family: fontnameRegular}

(Learning video sharing: css video tutorial)

The above is the detailed content of How to load external font files in css. For more information, please follow other related articles on the PHP Chinese website!