CSS引入外部字體
阿新 • • 發佈:2018-04-02
css font如何引入外部字體呢?
1.獲取相關文件
通常我們在網站下載到的字體包都是以TTF結尾的文件,但是我們前端開發時通常需要四種文件。
字體後綴和瀏覽器有關,如下所示
1.獲取相關文件
通常我們在網站下載到的字體包都是以TTF結尾的文件,但是我們前端開發時通常需要四種文件。
字體後綴和瀏覽器有關,如下所示
- .TTF或.OTF,適用於Firefox 3.5、Safari、Opera
- .EOT,適用於Internet Explorer 4.0+
- .SVG,適用於Chrome、IPhone
那我們如何獲得這四種文件呢?這裏推薦一個線上字體轉換軟件,地址如下:
https://www.fontsquirrel.com/tools/webfont-generator
2.引入外部文件@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.使用字體
body{ font-family: ‘YaHei Consolas Hybrid‘; font-size: 16px; }
CSS引入外部字體