annotations.html (975B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Annotations test</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 7 <style type="text/css"> 8 9 body { 10 margin: 20px; 11 font-size: 800%; 12 font-family: Hiragino Maru Gothic ProN, Meiryo; 13 } 14 15 /* for platforms without these fonts the default glyphs will show */ 16 17 @font-feature-values Hiragino Maru Gothic ProN { 18 @annotation { circled: 1; } 19 @annotation { black-circled: 4; } 20 @annotation { black-box: 8; } 21 @annotation { black-rounded-box: 10; } 22 } 23 24 @font-feature-values Meiryo { 25 @annotation { 26 circled: 4; 27 black-circled: 5; 28 black-box: 7; 29 black-rounded-box: 9; 30 } 31 } 32 33 #test1 { 34 font-variant-alternates: annotation(circled); 35 } 36 37 #test2 { 38 font-variant-alternates: annotation(black-circled); 39 } 40 41 #test3 { 42 font-variant-alternates: annotation(black-rounded-box); 43 } 44 45 </style> 46 47 </head> 48 <body> 49 <div><span id="test1">1</span> <span id="test2">2</span> <span id="test3">3</span></div> 50 </body> 51 </html>