3.14 (案例) @font-face

作者: 柒月柒日晴7 | 来源:发表于2017-06-07 23:49 被阅读0次

@font-face.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-face的应用</title>
    <style>


            /*
              @font-face {
              font-family: <YourWebFontName>;
              src: <source> [<format>][,<source> [<format>]]*;
              [font-weight: <weight>];
              [font-style: <style>];
            }
            */
        @font-face{
            font-family: "SingleMalta";
            font-weight: normal;
            font-style: normal;
            src: url('font/singlemalta-webfont.eot'); /* IE9 Compat Modes */
            src: url('font/singlemalta-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('font/singlemalta-webfont.woff') format('woff'), /* Modern Browsers */
                 url('font/singlemalta-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
                 url('font/singlemalta-webfont.svg#SingleMalta') format('svg'); /* Legacy iOS */
        }
        h1{
            font-family: "SingleMalta";
            font-size: 30px;
        }
    </style>
</head>
<body>



    <h1>lilei李雷</h1>
</body>
</html>