# webfont 字体预览

知识就像内-裤，看不见但很重要。

第一步：使用font-face声明字体

    @font-face {
        font-family: 'webfont';
        font-display: swap;
        src: url('webfont.eot'); /* IE9 */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff2') format('woff2'),
        url('webfont.woff') format('woff'), /* chrome、firefox */
        url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    }

第二步：定义使用 webfont 的样式

    .web-font {
        font-family: "webfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

第三步：为文字加上对应的样式

    <i class="web-font">知识就像内-裤，看不见但很重要。</i>