web fonts and font icons

Developers can specify a special font for their own web pages, regardless of whether the special font is installed on the user's computer, and the era of processing special fonts into pictures has become a thing of the past. Its support level is relatively good, even the lower version of IE browser can also support it.

1. Font format

The font formats supported by different browsers are different. It is necessary for us to learn about font formats.

1. TureTpe (.ttf) format

.ttf font is the most common font for Windows and Mac. It is a RAW format. Browsers that support this font are IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile, Safari4.2+;

2. OpenType (.otf) format

.otf font is considered to be a primitive font format, which is built on the basis of TureType. Browsers that support this font are 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, and it also supports the separation of metadata packages. Browsers that support this font include IE9+, Firefox3.5+, Chrome6+, Safari3. 6+, Opera11.1+;

4. Embedded Open Type (.eot) format

.eot font is a special font for IE, you can create this format font from TrueType, browsers that support this font have IE4+;

5. SVG (.svg) format

.svg font is a format based on SVG font rendering. Browsers supporting this font include Chrome4+, Safari3.1+, Opera10.0+, iOS Mobile Safari3.2+

2. Font icon

It is common to use some small icons commonly used on web pages to generate a font package for us with the help of tools, and then we can use the icons like text

1. Advantages

• Pack all icons into a font library to reduce requests;
• It is vectorial to ensure clarity;
• Flexible to use and easy to maintain

2. Generate font icon files

1. Download the font icon file (you can use Alibaba Vector Icon Network), and import the downloaded font or font icon file into the project

2. Custom font

/*定义字体图标*/
@font-face {
    
    
    font-family: 'wjs'; //自定义的字体名称
    src: url('../fonts/MiFie-Web-Font.eot'); /* IE9*/
    src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */
    url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */
}

3. Use fonts through css styles

/*自定义字体图标*/
.wjs_font_icon{
    
    
    font-family: wjs; //这里对应着自定义的字体名称
}
/*手机图标对应的编码*/
.wjs_font_icon_phone::before{
    
    
    content: "\e908"; //指定显示的内容
}

Web front-end communication QQ group: 327814892