<!DOCTYPE HTML> <html> <head> <title>Annotations test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { margin: 20px; font-size: 800%; font-family: Hiragino Maru Gothic ProN, Meiryo; } /* for platforms without these fonts the default glyphs will show */ @font-feature-values Hiragino Maru Gothic ProN { @annotation { circled: 1; } @annotation { black-circled: 4; } @annotation { black-box: 8; } @annotation { black-rounded-box: 10; } } @font-feature-values Meiryo { @annotation { circled: 4; black-circled: 5; black-box: 7; black-rounded-box: 9; } } #test1 { font-variant-alternates: annotation(circled); } #test2 { font-variant-alternates: annotation(black-circled); } #test3 { font-variant-alternates: annotation(black-rounded-box); } </style> </head> <body> <div><span id="test1">1</span> <span id="test2">2</span> <span id="test3">3</span></div> </body> </html>