在页面上显示服务器端的字体 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在页面上显示服务器端的字体</title>
    <style>
        @font-face {
            font-family: webfont;
            src: url(qtgg.otf);
        }
        @font-face {
            font-family: webfont;
            font-style: italic;
            src: url(jpzk.otf);
        }
        h1{
            font-family: webfont;
        }
        h2{
            font-family: webfont;
            font-style: italic;
        }
</style>
</head>
<body>
<h1>Hello Html5  Css3</h1>
<h2>Hello Html5  Css3</h2>
</body>
</html>
根据字体样式匹配服务端字体

效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在页面上显示服务器端的字体</title>
    <style>
        /*调用本地字库*/
        @font-face{
            font-family:Arial;
            src:local('Arial');
        }
        h1{
            font-family: Arial;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
<h1>在页面上显示服务器端的字体</h1>
<h1>Hello Html5  Css3 QPqp</h1>
</body>
</html>
设置文本大小写
font-variant:
normal       使用浏览器默认值
small-caps   使用小型大写字母
inherit      从父元素继承

 

posted @ 2018-01-12 13:50  苹瑶  阅读(754)  评论(0)  编辑  收藏  举报