网页使用字体（有字库）

效果：
代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script>
        <script type="text/javascript">
            $webfont.load("body", "a9f59eddf1434c639ecddf52f8447894", "winmantun23001");
            // 苹果丽黑字体
            $webfont.load(".p2", "4e72d83902bf4ba1b026585acb260c79", "winmantun23001");
            $webfont.load(".p3", "b48a817216c14c5ca3bd8302e80f40ee", "winmantun23001");
            // 奶油小甜心
            $webfont.load(".p4", "ee8c150e155947b8b88da90bc633a3d2", "winmantun23001");
            // 思源黑体Light
            $webfont.load(".p5", "3f2bf3bab00d4d68901b06f693b4390c", "winmantun23001");
            // 经典中圆简
            $webfont.load(".p6", "29d83e91954641bebc0da15031f249d4", "winmantun23001");
            // 汉鼎繁细黑
            $webfont.load(".p7", "9c19a16d9adb46848c090a74c0e6d6f2", "winmantun23001");
            // 德彪钢笔行书字库
            $webfont.load(".p8", "9dc486d7fd44404eaab25bddb4576ea5", "winmantun23001");
            $webfont.draw();
        </script>
        <style type="text/css">
            p{
                font-size: 30px;
                text-align: center;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <p class="p1">font这是一段字体</p>
        <p class="p2">font这是一段字体</p>
        <p class="p3">font这是一段字体</p>
        <p class="p4">font这是一段字体</p>
        <p class="p5">font这是一段字体</p>
        <p class="p6">font这是一段字体</p>
        <p class="p7">font这是一段字体</p>
        <p class="p8">font这是一段字体</p>
    </body>
</html>
网页使用字体（有字库）

猜你喜欢
