CSS Web Fonts Web Fonts

Fonts

1. CSS font-family

In CSS, you can use the font-family property to specify the font, text browser rendering time will be applied to elements based on this property. If this attribute is not specified, or the specified font does not exist on the client computer, the browser will use the default font.

    <style>
        .line {
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
    <p>Hello World!</p>

If you do not set the font-family, the browser will use the default font used in the elements.
If the font-family property specifies the font, not, use the default font on the local computer
If the font name has spaces, you must use quotation marks.
Font-family property used to specify a font, the font can also specify a set of lists - a plurality of fonts comma separated
If you specify a set of fonts list, it will turn to find the first font is not available locally, then use the second. If the specified font list of fonts, not the local computer, the browser uses the default font applied to elements

2. Web safe fonts (web-safe fonts)

The system is usually only a certain number of fonts available, and a different system fonts may not be the same, so you can use the Windows font, not necessarily be used in other systems.

Developers specified font, it has been installed on your computer, so it can be displayed properly. But the client machine and the entire font is not installed, the client uses the default font. So developers to consider what some fonts the client base will be installed.

Some fonts can be used in common systems (Windows, Mac, common Linux distributions, Android and iOS versions), these fonts are safe fonts.
Specific reference:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts

3. Web fonts (web fonts)

CSS Web fonts is a feature that allows the specified font file is downloaded to the local.

This is a very effective way, so it is not limited to the font if the font is installed locally, and most browsers support Web fonts.

Web fonts used:

Setp 1 download web fonts; in CSS, use @font-facethe keyword web fonts download, there are two necessary attributes
- src Specify the font resource,
- font-family A custom name.
```
  @font-face {
      font-family: "myFont";
      src: url("myFont.ttf");
  }
```
Setp 2 font; setting font-familyproperty, but this time font-familysetting the network name of the font, the font system instead. (Network name of the font has been defined in the previous step.)
```
  .line {
    font-family: 'myFont;
  }
```

3.1. About Web Fonts

As a Web font technology, IE 4 from the beginning supported.
Browsers support different font formats, so you need a variety of font formats to get a good cross-browser support.
Most browsers support WOFF / WOFF2 (Web Open Font Format versions 1 and 2, Web Open Font Format Version 1 and 2), it is the most effective format, but it seems that the old versions of IE supports only EOT (Embedded Open Type, embedded type open type) font, may need to include a version of the SVG font support older versions of the iPhone and Android browsers.
Fonts are generally not free to use. Must pay for them, or follow other permit conditions, such as in the code (or on your site) provides font creator. You shall not steal fonts without authorization.

3.2. Font Format

TureType (.ttf) format

font .ttf is the most common Windows and Mac fonts, is a RAW format that supports this font browser has ID9 +, Firefox3.5 +, Chrome4 +, Safari3 +, Opera10 +, iOS Mobile, Safari4.2 +
OpenType (.otf) format

.otf font is considered an original font format, which is built on the basis of TureType, support this font browsers are Firefox 3.5 +, Chrome4.0 +, Safari3.1 +, Opera10.0 +, iOS Mobile , Safari4.2 +
Web Open Font Format (.woff) format

.woff font is a font best Web format, it is a compressed version of an open TrueType / OpenType, but also supports separate metadata package to support this font of browsers IE9 +, Firefox3.5 +, Chrome6 +, Safari3 .6 +, Opera11.1 +
Embedded Open Type (.eot) format

IE .eot fonts are special fonts, you can create this format fonts from TrueType, support this font browsers IE4 +
SVG (.svg) format

.svg font is based on a format SVG font rendering and font support this browser has Chrome4 +, Safari3.1 +, Opera10.0 +, iOS Mobile Safari3.2 +

Different browsers support different formats, some of the older versions of the browser, they only support the old version of the font format. For example, most modern browsers support WOFF / WOFF2 (Web Open Font Format versions 1 and 2, Web Open Font Format Version 1 and 2), it is the most effective format, but older versions of IE supports only EOT (Embedded Open Type , embedded OpenType) fonts, you may need to include a version of the SVG font support older versions of the iPhone and Android browsers

So we usually put several fonts are available, allowing the browser of their choice, so you can get a better compatibility.

Fonts are generally not free to use, they had to pay, or to follow some conditions. You shall not steal fonts without authorization.

3.3 Statement fonts, @ font-face

@font-face {
    font-family: 'myFont';
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

font-family Define the font name, just like the built-in font "Times New Roman", "Microsoft elegant black", "console" as such.

src There are two parts:

Specifies the path to import (download) font file: url
format: font file format specification, which allows the browser to find the fonts can be used more quickly, optional.

src You can list multiple declarations, separated by commas.

Browser find the font that can be used in declaration order, so the best format on the front, the relatively long format on the back. For example WOFF2 general on the front, TTF placed last.

eotFont and IE is an exception, eotis a format created IE only supports IE and IE9 does not support the format statement, so there will be two srcstatements, one of which is specific eotand of IE9

http://www.w3help.org/zh-cn/causes/RF1001

https://www.w3.org/Submission/EOT/

4. Get web fonts

Fonts Fonts can be obtained through a number of service providers, some for a fee, some free.

4.1. To get the font, use the Internet iconfont

There are also many websites providing font, but in general with Ali IconFont , select the menu bar at the top of the home page online font

Step 1 In the top text input box to apply font text, such as:

我是一个任性的孩子，我希望，每一个时刻都象彩色蜡笔那样美丽。

(This line of sentence entered a total of 30 characters)

Step 2 Add the font formatting you want to apply.

Step 3 Download and extract the text,

In the display font text box of the application you need, select the local download, download get a zip file, unzip it, you get the font file.

Ali provides online reference and downloaded to the local two kinds of reference, but here we have the option to download, the local test can not be used online references. @@@ official are explained specifically, referring to official webfont distal help using the third in a Q & A.

After unpacking you will see that there .eot .svg files in these formats .ttf .woff .woff2, these are the font files.

4.2. Simple to understand font files

These files are opened directly, basically garbled, can not see directly, except .svgwe can directly open.

Open .svgwe can see two important things:

Inside a total of 26 <glyph>elements
Each element has a unicodeproperty

First look at the unicodeproperty:

This unicodeproperty is represented by a character unicodecode, we have just taken part entering text, see the text below and unicodecoding control:

我       是      一      个       任      性      的       孩      子       ，
&#25105;&#26159;&#19968;&#20010;&#20219;&#24615;&#30340;&#23401;&#23376;&#65292;
&#x6211;&#x662f;&#x4e00;&#x4e2a;&#x4efb;&#x6027;&#x7684;&#x5b69;&#x5b50;&#xff0c;

(The first line of text, the second line is the corresponding base 10 unicodecodes, the third row corresponds to the hexadecimal unicodecode)

.svgDocuments in the unicodeuse of hexadecimal unicodecode, so the above hexadecimal unicodeencoding to .svgfile lookup, each of which can be found. And a closer look <glyph>to sort, according to unicodethe sort order of the coding. Therefore, each <glyph>corresponds to a character unicodeand a display (property d).

Let's look at <glyph>the elements:

Each <glyph>corresponds to a text unicodeand display (property d), but here a total of only 26 <glyph>, and we have a total of 30 words, why only 26 <glyph>of it?

Because the 30 characters we have entered contains three words are repeated: "I", "a", "," (comma). Not repeated text a total of 26, so Ali iconfont just give us generate our this 26 text input, and is based on unicodethe sort of coding sequence. So here we should pay attention to this download fonts only 26 characters, other characters do not have this font.

In addition there is a .html file, which is detailed steps to use fonts of 3.

4.3. Declarations and font

In fact, use the .html file has a description, you can follow the operation.

    <style>
        /* 第一步：使用font-face声明字体 */
        @font-face {
            font-family: 'hello-web-font';
            font-display: swap;
            src: url('webfont.eot');
            /* IE9 */
            src: url('webfont.eot?#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('webfont.woff2') format('woff2'),
                url('webfont.woff') format('woff'),
                /* chrome、firefox */
                url('webfont.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('webfont.svg#webfont') format('svg');
            /* iOS 4.1- */
        }
        /* Step 2, 定义使用 webfont 的样式 */
        .my-web-font {
            font-family: "hello-web-font" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <!-- Step 3. 为文字加上对应的样式 -->
    <p class="my-web-font">我是一个任性的孩子，我希望，每一个时刻都象彩色蜡笔那样美丽。</p>
    <p class="my-web-font">我希望，能在心爱的白纸上画画，画出笨拙的自由</p>

In the above example, a line of specially pay more, then look at the results:

I was a wayward child, I hope that every moment as beautiful as crayons.

I hope, able to love the painting on white paper, draw clumsy of freedom

This effect results almost as described above, why are some fonts were changed, some indeed a default font to use it?

Because that 26 characters we generated fonts only our generation, our generation is the first line of the content, so the first line change the font of all, and that only a few second line of text fonts contained in the file ( unicodeencoded) , will have a corresponding font achieve.

5. font icon

First look at the different fonts, here are three different fonts, namely: the default font, vivaldi font, Wingdings font.

(The three default fonts are already installed Windows fonts)

<span>ABC123</span>
<span style="font-family:vivaldi">ABC123</span>
<span style="font-family:Wingdings">ABC123</span>

The output of the code above is as follows:

ABC123

The first line is the default font.

The second line of the font is very beautiful, but also well understood, because we will often use a variety of beautiful fonts when processing documents.

The third is more surprising, the third line is "ABC123", but his display font became "special" characters, the user feel like a text which, like an icon, but essentially he is a character, some coding.

So the font icon is a text, font called "icon" because after you apply a font, the text looks "like" an "icon."

5.1. Apply font icon

On the site there are always various icons, such as the Back button to return to a small icon represents, such as the menu bar - there is a general user information users villain icon, there is a shopping cart shopping cart icon.

Small icons are previously treated with sprite, sprite process has three disadvantages

Write style
Sprite is a small picture, zoom is distorted
Sprite is a picture, color can not be modified

In CSS, you can use an alternative font icon sprite, and has many advantages:

All packaged into an icon font libraries, reducing the request (fonts are packaged, one-time access a web page when is downloaded)
Having a property vector, amplification without distortion, random zoom ensure clarity
Flexible, easy to maintain (because he is a character, so it is possible to modify the color, style, size and so on; For application font font style and more flexible than modify the picture)

5.2. To get the font icon via the Internet, using iconfont

That is, text, icons, and so generate fonts generate Web fonts without any distinction on the font icon in nature. In iconfont find the menu bar icon library home page above - the official icon library

Search icon you want in the chart library, and then move the mouse to the icon to select the "shopping cart" to save the icon to your shopping cart.

After the icons are added to complete, select the top right corner of the shopping cart, and then select Add to the project in the shopping cart. (If you do not add project items)

Then enter the project page, project page select "Download to local"

Open the folder and the network will find the same font, font files, and there will be more than a demo.html. The detailed operation of the inside demo.html have.

Next, we use the same font and network (using the unicodefont),

Step 1 statement fonts, use@font-face

Step 2 Custom Style

Step 3 Application style Note: This section need to specify the specific unicodecoding

To use the Fonts icon in Step 3 looks slightly different - you need to specify your own unicodecode, but in fact the same as the text and font (font icon is the font of text), because the font inside the text, I also emphasized that we just download our generation text, if the application of the font to the text font file is not, then the text will not be any change, it will use the default font. So the font icon of the Step 3 - To specify your own unicodecode, in fact, like text and fonts, font icons just use the time we have is to use the designated icon (text), so you need which icon to use, will be here using a corresponding unicodeencoding.

The first two steps, like text and fonts, and demo.html species have been described in detail, but Step 3 should pay attention to the use of the corresponding unicodecoding, such as a shopping cart icon I use unicodecode is:

<span class="hello-icon-font">&#xe63c;</span>

5.3. Using pseudo-element binding

unicode HTML coding to appear on the inside, not intuitive, if look at the code, it is impossible to know which means a cart "icon"

<span class="my-icon-font">&#xe63c;</span>

Using CSS pseudo-elements add text ( unicodecoding), and give the name of a CSS style is more intuitive, it's a good idea.

such as:

Step 2 defines the font style icon

.my-icon-font{
    font-family: hello-icon-font;
}

Step 3 using a pseudo-elements, because the "icon" indicates a cart, so to define the style name called "cart", which is more intuitive.

.cart::before{
    content: "\e641"; /* &#xe641 */
}

Since it is a font, you can change the font attributes, (before writing style in Step 2 in)

.cart::before{
    content: "\e641"; /* &#xe641 */
    color: red;
    font-size: 50px;
}

Step 4 is the original of the STEP 3 , apply styles to elements

<span class="my-icon-font cart"></span>

reference:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts