osaka-mono-exists.html (849B)
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 @font-face { 7 font-family: Ahem; 8 src: local("Ahem"), url("../fonts/Ahem.ttf"); 9 unicode-range: U+0-7F; /* ASCII only */ 10 } 11 div { font-size: 50px; line-height: 100px; } 12 /* We use vertical writing-mode because in horizontal mode, the Regular and Mono 13 faces have slightly different line-height metrics, and so although the glyph 14 would match, its positioning would differ. */ 15 .ref { font-family: Ahem, "Osaka", serif; writing-mode: vertical-rl; } 16 .test { font-family: Ahem, "Osaka-Mono", serif; writing-mode: vertical-rl; } 17 </style> 18 </head> 19 <body> 20 <p>The two Japanese characters below should use the same font: 21 if "Osaka" is present, the name "Osaka-Mono" should also work.</p> 22 <div><span class=ref>絵</div> 23 <div><span class=test>絵</div> 24 </body> 25 </html>