css3文字与字体样式

时间：2023-11-23 13:44:32

css3使用服务器端字体:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用服务器端字体</title>

    <style>

        @font-face {

            font-family: webFont;

            /*此代码会首先用客户端字体Arial，如果客户端没有用下面一种服务器端字体*/

            /*format格式: (ttf):truetype;(otf):opentype*/

            src:local("Arial"),

                url("../../font/ACaslonPro-Bold.otf")format("opentype");

        }

        p{

            font-family: webFont;

        }

    </style>

</head>

<body>

<p>This is a test p</p>

</body>

</html>

css3修改字体种类而保持字体尺寸不变:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3 修改字体种类而保持字体尺寸不变</title>

    <style>

        /*x-height:58px;  font-size:100px;  aspect:0.58;  font-size-adjust: 0.56;*/

        #p1{

            font-family:"Arial Black";

            font-size: 16px;

            font-size-adjust: 0.76;

        }

        #p2{

            font-family:"Arial";

            font-size: 16px;

            font-size-adjust: 0.56;

        }

        #p3{

            font-family:"Bodoni MT";

            font-size: 16px;

            font-size-adjust: 0.46;

        }

    </style>

</head>

<body>

<p id="p1">this isa test p1</p>

<p id="p2">this isa test p2</p>

<p id="p3">this isa test p3</p>

</body>

</html>

相关文章