How do I introduce an external font?
1. Get Related Documents
Most of the font packages we download on our web site are files that end in TTF, but we typically need four of files for our front-end development.
The font suffix is related to the browser, as shown below
- . TTF or. OTF for Firefox 3.5, Safari, Opera
- . EOT, for Internet Explorer 4.0+
- . SVG, for Chrome, IPhone
So how do we get these four kinds of documents? This is a recommended online font conversion software, with the following address:
Https://www.fontsquirrel.com/tools/webfont-generator
2. Introduction of external files@font-face {font-family: ‘HansHandItalic‘;src: url(‘fonts/hanshand-webfont.eot‘);src: url(‘fonts/hanshand-webfont.eot?#iefix‘) format(‘embedded-opentype‘), url(‘fonts/hanshand-webfont.woff‘) format(‘woff‘), url(‘fonts/hanshand-webfont.ttf‘) format(‘truetype‘), url(‘fonts/hanshand-webfont.svg#webfont34M5alKg‘) format(‘svg‘);font-weight: normal;font-style: normal;}
3. Using fonts
body{font-family: ‘YaHei Consolas Hybrid‘;font-size: 16px;}
CSS introduces external fonts