CSS3文字与字体相关样式

1.使用服务器端字体

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    @font-face{
        font-family:WebFont;
        /* ttf :o otf:t */
        src:url(FUBOLD.TTF) format("truetype");
        font-weight:normal;
    }
    div{
        font-family:WebFont;
    }
</style>
</head>

<body>

    <!-- word-break
                    :normal:使用浏览器默认的换行规则
                    :keep-all:在半角和连字符处换行
                    :break-all:允许在单词间内换行 
     -->
     <div>demodemo</div>

</body>
</html>

这里写图片描述
2.如果客户端有该字体,则加载客户端字体

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    @font-face{
        font-family:Arial;
        src:local("Arial"),         /* 加载客户端字体 */
            url("FUBOLD.TTF");      /* 如果客户端不存在字体,则加载该服务器端字体 */
    }
    div{
        font-family:Arial;
    }
</style>
</head>

<body>

    <!-- word-break
                    :normal:使用浏览器默认的换行规则
                    :keep-all:在半角和连字符处换行
                    :break-all:允许在单词间内换行 
     -->
     <div>demodemo</div>

</body>
</html>

这里写图片描述

猜你喜欢

转载自blog.csdn.net/zjsfdx/article/details/79334159