Problem Description: In cross-server or browser development, some fonts are incompatible. It is recommended to use @font-face.

1, install,

Install the required font packs (e.g., search and install TTF/WOFF font packs)

2. Format conversion

Website: www.fontsquirrel.com/tools/webfo… Open the font package (TTF used as an example) on the installation side, search for the required font =, select file =, and export the font to the local PC

Open the web sitewww.fontsquirrel.com/tools/webfo…To upload the. TTF file downloaded in the previous step, perform the following steps

Eot +.ttf /.otf + SVG + woff can achieve perfect support. Therefore, you need to perform the following operations to select export to customize the required font file

Make the choices you need, and then you can download in peace

Once the download is complete, you get all the font files you need and import them in your code.

3, use,

@font-face {font-family: 'DINCond'; src: url('.. /.. /images/DINCond-Bold.eot'); src: url('.. /.. /images/DINCond-Bold.eot? #iefix') format('embedded-opentype'), url('.. /.. /images/DINCond-Bold.woff') format('woff'), url('.. /.. /images/DINCond-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; }... . . .myClass { ... font-family: 'DINCond'; }Copy the code