Detailed explanation of css3 text and font styles-CSS Tutorial-php.cn

Detailed explanation of css3 text and font styles

高洛峰

Release： 2017-03-13 14:08:31

Original

1742 people have browsed it

This article explains in detail css3 text and font styles

css3 uses server-side fonts:

<!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>

Copy after login

css3 changes the font type while keeping the font size unchanged :

<!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>

Copy after login

The above is the detailed content of Detailed explanation of css3 text and font styles. For more information, please follow other related articles on the PHP Chinese website!