liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0の各種修飾 - font-size-adjust属性

font種類によって文字の幅が異なったりする。これを解決するために使用するのがfont-size-adjust属性。

※font-size-adjust属性値は通常フォントのaspect値を設定する。
font種類のaspect値は固定されている。 aspect値 = 小文字xの高さ / フォントサイズ

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> text-size-adjust </title>
   <style type="text/css">
        #div1 {
            font-size: 16pt;
            font-family: "Arial Black";
            /*font-size-adjust: 0.52;*/
        }
        #div2 {
            font-size: 16pt;
            font-family: "Bodoni MT";
            /*font-size-adjust: 0.48;*/
        }
        #div3 {
            font-size: 16pt;
            font-family: "Niagara Solid";
            /*font-size-adjust: 1.22;*/
        }
    </style>
</head>
<body>
<div id="div1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div id="div2">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div id="div3">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</body>
</html>

f:id:liguofeng29:20160129214649p:plain

font-size-adjust属性使用後

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> text-size-adjust </title>
   <style type="text/css">
        #div1 {
            font-size: 16pt;
            font-family: "Arial Black";
            font-size-adjust: 0.52;
        }
        #div2 {
            font-size: 16pt;
            font-family: "Bodoni MT";
            font-size-adjust: 0.40;
        }
        #div3 {
            font-size: 16pt;
            font-family: "Niagara Solid";
            font-size-adjust: 1.3;
        }
    </style>
</head>
<body>
<div id="div1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div id="div2">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div id="div3">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</body>
</html>

f:id:liguofeng29:20160129214925p:plain