css3文字與字體樣式

本文轉載自查看原文 2017-03-13 12:34 1315 css3

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3文字倒影樣式 css3文字邊框樣式設置 CSS3文字倒影 CSS3文字漸變效果 [html5/css3] css3 文字和字體樣式 css3文字顏色漸變動畫 css3文字描邊加外發光 css3文字顏色從左到右動畫盤點5個典型的CSS3文字特效 css3文字顏色動態漸變