How to introduce css external fonts? Introduction to the introduction of css external fonts

Sometimes we need to have a good-looking font in the website page. After all, a good-looking font will make the entire page look more beautiful and more attractive to users. We may think of using pictures to achieve this good-looking font, but today’s This article is not to introduce you to using pictures to make a good-looking font, but to introduce you to the method of introducing external fonts in css.

Without further ado, let’s get straight to the point~

What we need to use when introducing css external fonts is the @font-face of css3. What is @font-face? Let’s take a look

@font-face is a module in CSS3. It mainly embeds self-defined Web fonts into your web pages.

First let’s take a look at the syntax rules of @font-face:

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

font-family: : Custom font Name (generally set to the name of the imported font), and the font will be referenced by this name in subsequent style rules.

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

Note: There is also a local (font name) after the src attribute Field, indicating that the font is loaded from the user system, and the webfont is loaded only after failure.

src: local(font name), url("font_name.ttf")

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

format : Font format, mainly used for browser recognition, generally includes the following types - truetype, opentype, truetype-aat, embedded-opentype, avg, etc.

font-weight and font-style are the same as those used before.

Then let’s take a look at the implementation method of css external font introduction:

The first step is to introduce the font in CSS and give it a suitable name. As follows

First download the font and place it in the font directory

font.css:

@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');
}

Note:

fontname represents the font file name The name

For example, if your font file is php.ttf, then all the fontname above must be changed to php

font-family to define the name of the font. The next src is to load the font file. Location, the reason why there are multiple URLs is because of browser compatibility issues.

The second step is to use the font just defined, as follows

h1{font-family: fontnameRegular}

This article ends here. For more exciting content, you can pay attention to the relevant tutorial columns of the php Chinese website! ! !

The above is the detailed content of How to introduce css external fonts? Introduction to the introduction of css external fonts. For more information, please follow other related articles on the PHP Chinese website!