@font-face Handling Special fonts in Web pages

For a front-end, Yan value is justice, a period of time the company's official website was warned of copyright infringement using Microsoft Font (cover face), received instructions to immediately change the entire website font Cheng Siyuan blackbody, although ugly point, but free ah, hurriedly changed up. But one problem is that even if you install the font of the source blackbody locally, the Web page is to be uploaded to the server, the user visits the Web site, their computer does not necessarily have the source font, unless the font is installed on the client computer, the user can not display this font.

① first found in their own native blackbody font files, if not can be downloaded on the Internet;

② Baidu Font-face Generator, according to the above steps, upload the source blackbody file, will generate a variety of format source Blackbody file saved to the local, new folder fonts, save;

③ put fonts files in their own uploaded web site files, create a new fonts.css file, use the @font-face property to customize the font settings, we can freely use the network of custom fonts, for a chestnut ~

1 @font-face{2 font-family:"gufeibai"; Here is our own name for the font3 src:URL ("sourcehansans-regular.woff2") format ("Woff2"),4 URL ("Sourcehansans-regular.woff") format ("Woff"),5 URL ("Sourcehansans-regular.ttf") format ("TrueType"),6 URL ("Sourcehansans-regular.eot") format ("Embedded-opentype"),7 URL ("sourcehansans-regular.svg") format ("SVG"),8 URL ("SOURCEHANSANS-REGULAR.OTF") format ("OpenType");9 Font-weight:Normal;Ten Font-style:Normal; One} A Body{ - Font:15px/1.5 "gufeibai", Arial,sans-serif; - Color:#666; the background:#fff; -}

@font-face Handling Special fonts in Web pages