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