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