What CSS rules are required to define custom fonts?

Defining a custom font requires the "@font-face" rule of css. The "@font-face" rule is mainly to embed user-defined web fonts into web pages, the syntax is "@font-face{font-family: 'font name';src:url('file address');}".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to make your page support custom fonts, in one sentence, use @font-face.

@font-face is a module in CSS3. It mainly embeds self-defined Web fonts into your web pages. With @font-face## With the emergence of the #module, we are not afraid that we can only use Web-safe fonts when using fonts in Web development. Let’s take a look at how to use @font-face.

First of all, let’s take a look at the grammatical rules of

@font-face:

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

Value description

1. YourWebFontName: This value refers to your customized font name. It is best to use the default font you downloaded. It will be referenced to the font-family in your Web element. Such as "font-family:"YourWebFontName";"

2. source: This value refers to the storage path of your customized font, which can be a relative path or an absolute path;

3. Format: This value refers to the format of your customized font, which is mainly used to help the browser identify it. Its values ​​mainly include the following types: truetype, opentype, truetype-aat, embedded-opentype, avg, etc.;

4. Weight and style: You must be familiar with these two values. Weight defines whether the font is bold, and style mainly defines the font style, such as italics.

Compatible browsers

Speaking of browser compatibility issues with @font-face, this involves a font format Problem, because different browsers have inconsistent support for font formats, it is necessary for everyone to understand what kind of fonts are supported by various versions of browsers. I briefly mentioned several formats related to fonts earlier. I will explain them separately below. Let’s talk about this problem so that everyone has an idea:

1. TrueTpe (.ttf) format:

.ttf font is the most common for Windows and Mac The font is a RAW format, so it is not optimized for the website. The browsers that support this font are [IE9, Firefox3.5, Chrome4, Safari3, Opera10, iOS Mobile Safari4.2];

2. OpenType (.otf) format:

.otf font is considered an original font format, which is built on the basis of TrueType, so it also provides more functions. Browsers that support this font include [Firefox3.5, Chrome4.0, Safari3.1, Opera10.0, iOS Mobile Safari4.2];

3. Web Open Font Format(.woff ) Format:

.woff font is the best format among Web fonts. It is an open TrueType/OpenType compressed version. It also supports the separation of metadata packages and supports the browsing of this font. The devices include [IE9, Firefox3.5, Chrome6, Safari3.6, Opera11.1];

4. Embedded Open Type (.eot) format:

. eot font is a special font for IE. This format font can be created from TrueType. The browsers that support this font are [IE4];

5. SVG (.svg) format:

.svg font is a format based on SVG font rendering. Browsers that support this font include [Chrome4, Safari3.1, Opera10.0, iOS Mobile Safari3.2].

This means that in @font-face we need at least two format fonts, .woff and .eot, and even .svg and other fonts to support more browsing versions.

In order to enable @font-face to achieve more browser support,

Paul Irish wrote a unique @font-face syntax called Bulletproof @font-face :

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot?') format('eot');/*IE*/
	src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
   }

But in order to be supported by many browsers, you can also write:

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

After talking about so much empty theoretical knowledge, everyone must be a little itchy, so let’s do it first Take a look at how the blue font in the navigation section of the W3CPLUS homepage is implemented. If we have a DOM tag like this, we need to apply a custom font:

HTML Code:

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

Define your own Web Font through @font-face:

  @font-face {
    font-family: 'NeuesBauenDemo';
    src: url('../fonts/neues_bauen_demo-webfont.eot');
    src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
	url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
	url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
    font-weight: normal;
    font-style: normal;
  }

I use a relative path here, but of course you can also use an absolute path. At this point we need to apply the defined font to our actual page:

   h2.neuesDemo {
      font-family: 'NeuesBauenDemo'
   }

Effect:

(Learn Video sharing:

css video tutorial)

The above is the detailed content of What CSS rules are required to define custom fonts?. For more information, please follow other related articles on the PHP Chinese website!