annotations-ref.html (1516B)
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-face { 18 font-family: testMeiryo-circled; 19 src: local(Meiryo); 20 font-feature-settings: "nalt" 4; 21 } 22 23 @font-face { 24 font-family: testMeiryo-black-circled; 25 src: local(Meiryo); 26 font-feature-settings: "nalt" 5; 27 } 28 29 @font-face { 30 font-family: testMeiryo-rounded-box; 31 src: local(Meiryo); 32 font-feature-settings: "nalt" 9; 33 } 34 35 @font-face { 36 font-family: testHiraginoMaru-circled; 37 src: local(HiraMaruProN-W4), local(Hiragino Maru Gothic ProN W4); 38 font-feature-settings: "nalt" 1; 39 } 40 41 @font-face { 42 font-family: testHiraginoMaru-black-circled; 43 src: local(HiraMaruProN-W4), local(Hiragino Maru Gothic ProN W4); 44 font-feature-settings: "nalt" 4; 45 } 46 47 @font-face { 48 font-family: testHiraginoMaru-rounded-box; 49 src: local(HiraMaruProN-W4), local(Hiragino Maru Gothic ProN W4); 50 font-feature-settings: "nalt" 10; 51 } 52 53 #test1 { 54 font-family: testHiraginoMaru-circled, testMeiryo-circled; 55 } 56 57 #test2 { 58 font-family: testHiraginoMaru-black-circled, testMeiryo-black-circled; 59 } 60 61 #test3 { 62 font-family: testHiraginoMaru-rounded-box, testMeiryo-rounded-box; 63 } 64 65 </style> 66 67 </head> 68 <body> 69 <div><span id="test1">1</span> <span id="test2">2</span> <span id="test3">3</span></div> 70 </body> 71 </html>