Use of @font-face

For details, please see what is @font-face and how to use it in css.
Add new fonts that the computer itself has, and open up a whole new world for programmers - you can use your favorite fonts at will! ! !
I recommend Ali's font icon library in China
http://www.iconfont.cn/

Example of use:

@font-face{
    font-family: 'turn-arrow';
    src: url('../fonts/icons/turn-arrow.eot') format('embedded-opentype'), url('../fonts/icons/turn-arrow.woff') format('woff'), url('../fonts/icons/turn-arrow.ttf') format('truetype'), url('../fonts/icons/turn-arrow.svg') format('svg');
}

.is-center::after{
    font-family: 'turn-arrow';
    content:'\e600';
    color: #ffffff;
    line-height: 30px;
}

compatibility

Not all browsers support @font-face!

Currently, @font-face supports

Firefox
Opera
Chrome
Safari
Internet Explorer 9
Is this what you would say he does not support browsers below IE9, don't worry, different browsers support specific font files when using @font-face in older browsers.

IE: EOT
Mozilla: OTF, TTF
Safari: OTF, TTF​​, SVG, truetype
Opera: OTF, TTF​​, SVG
Chrome: TTF, SVG, woff, truetype
FireFox: woff, true ,type