Reprint is prohibited by IMWeb community without permission

An overview of the

Generally speaking, the font on the web page is the font in our computer, for example, we often say Microsoft Yahei, Song Typeface is the font of the Windows system. As a result, you can see that the fonts on web pages tend to be more conventional than graphic design.

But when we browse some websites, we can still find some really cool and high-end fonts. Such as Xiaomi notebook Air:

Here we can see that it uses the ‘F5130a’ font, but this cool high-end font that we don’t have on our computers is actually a custom font for the site.

So how to achieve the effect of custom fonts? The answer is CSS [@font-face](/user/font-face).

[@font-face](/user/font-face)

[@font-face](/user/font-face)

[@font-face](/user/font-face) { font-family: <fontFamily>; /* Custom font name; */ src: <source> [<format>][,<source> [<format>]]*; /* Custom font storage path, format; */ [font-weight: <weight>]; < span style = "max-width: 100%; clear: both; /* Define font styles, such as italic */}Copy the code

The values are described as follows:

  • fontFamily

    This value refers to your custom font name, such as “font-family: myFirstFont”.

  • source

    This value refers to the relative or absolute path of your custom font.

  • format

    This value represents the format of a custom font that is used to help browsers recognize font types.

  • Weight and style

    The two values are familiar: weight defines whether the font is bold, and style defines the font style, such as italic.

Practical use

[@font-face](/user/font-face) First of all, we can download any font from Dafont. Here we select the following font:

After unpacking, we have our font files (.ttf and.otf are different font formats, which we will discuss below).

Write the code (for ease of use, the.ttf font weight has been named webfont-ttf)

<! DOCTYPE HTML > < HTML > <head> <meta charset="UTF-8"> <title> Customize font </title> <style type="text/ CSS "> /* Define font */ [@font-face](/user/font-face) { font-family: 'Hard Stones Sans Strip'; src: url('webfont.ttf') format('truetype'); } .custom-font { font-family: 'Hard Stones Sans Strip'; /* Use [@font-face](/user/font-face) custom font */ font-size: 80px; } </style> </head> <body> <p class="custom-font">HEAD SCRIPT</p> </body> </html>Copy the code

The final effect is visible: custom fonts.

Font format

TTF and.otf are two different font formats. In addition, there are several different font formats.

  • TrueType (.ttf)

    The most commonly used font formats for Windows and Mac systems are contours based fonts defined by a mathematical model, which makes them easier to process than vector-based fonts and ensures consistency between the screen and the printed output. Also, like vector fonts, they can be scaled and rotated without worrying about jagged edges.

  • OpenType (.otf)

    Scalable Font OpenType is a new type of computer font developed by Microsoft and Adobe to replace TrueType in PostScript format. The file extension for such fonts is.otf and the type code is OTTO.

  • Embedded Open Type (.eot)

    Embedded Font Formatting (EOT) is a technology developed by Microsoft that allows OpenType fonts to be embedded into web pages and downloaded for browser rendering. These files are only temporarily installed on the user’s system while the page is currently active.

  • Web Open Font Format (.woff)

    As opposed to TrueType and OpenType, WOFF (Font Format for Web Development) is a font format standard specifically designed for the Web. It is not complicated and is really just a wrapper around font formats such as TrueType/OpenType, optimized for Web use: Each font file contains the font and Metadata for the font, the font file is compressed for network transmission, and does not contain any encryption or DRM measures.

  • Scalable Vector Graphics Fonts (.svg), as the name implies, use SVG technology for rendering Fonts, and a Gzip compressed SVG font,.svgz.

The problem with so many fonts is browser support: most modern browsers support.ttf,.otf,.woff. Note that IE8 below only supports.eot, while.svg is currently only supported by Safari. See the following for details of compatibility:

  • . Otf browser compatibility
  • .ttF browser compatibility
  • .woff browser compatibility
  • . Eot browser compatibility
  • .svg browser compatibility

How compatible

The [@font-face](/user/font-face) rule may not work in some browsers if only one font format is considered. Therefore, in order to be compatible with different browsers, we usually use multiple formats, as follows:

[@font-face](/user/font-face) { font-family: 'myFont'; src: url('myFont.eot'); /* IE9 Compat Modes */ src: url('myFont.eot? #iefix') format('embedded-opentype'), /* IE6-IE8 */ url('myFont.woff') format('woff'), /* Modern Browsers */ }Copy the code

Custom iconfont (iconfont)

Custom fonts are rarely used, but there is one area where they are widely used: custom iconfont. The following ICONS:

We often use these ICONS in the web pages. In the past, we used to do it mainly through the background image. Every time we change the color or size, we have to cut the image again, so the maintenance and use of these ICONS is cumbersome. It provides a solution: make some simple ICONS into fonts and then make the ICONS look like text with CSS to change the color size and so on.

The iconfont icon has a number of advantages for ICONS that use images:

  • Flexibility: Easy to change icon color, background color, size
  • Compatibility: basically no compatibility issues, in IE6, Android2.3 can be compatible
  • Extensibility: ICONS are easy to replace and easy to add
  • Efficiency: IconFONT is vector and does not distort
  • Portability: Like static resources, font files can be chained or chained, and font files can be compressed using GZIP

With all these advantages, let’s do it.

First let’s go to Fontello and select a few ICONS:

Then download it and unzip it as follows:

Open our demo. HTML file in your browser to see the font icon we downloaded.

Before we use it, let’s take a look at the style of fontello. CSS.

[class^=”icon-“]:before, [class*=” icon-“]:before Finally, set the content of different pseudo-elements according to different classes.

Create a new file, import (or copy) the font style from fontello. CSS, and write the corresponding HTML structure as follows:

<! DOCTYPE HTML > < HTML > <head> <meta charset="UTF-8"> <title> font icon </title> <link rel="stylesheet" href=" CSS /fontello.css"> </head> <body> <i class="icon-search"></i> <i class="icon-mail"></i> </body> </html>Copy the code

The final effect is visible: the font icon.

See why and how to use font ICONS for more information.

PS: Generally speaking, there are not so many font formats, you can choose the format according to the actual needs of compatible browsers, the rest do not need to remove.

Font resources and font icon library

  • dafont
  • A word stock
  • GoogleFont (requires scaling the wall)
  • The word spider
  • Fontello
  • icomoon
  • iconfont

The resources

  • CSS 3 fonts
  • @font-face)