丸数字は何かと厄介だから、なるべく使わない方がいいと思う。HTML文書では (数字) で代用しても構わないと思うが、印刷物の引用や参照など、やむを得ない場合もあろう。今はフォントによる丸数字の実装も進んでいるから、そのまま使っても大丈夫という話もあろうが、50までしかないようだし、中に数字を入れ込む都合上、どうしてもデザインに無理が出てくる。というか(少なくとも二桁丸数字は)読みにくい。丸数字をちゃんとデザインして画像にするのも手だが、できればテキストで表現したい。
そこでHTML文書における可読性を重視し、CSSで表現してしまう方法を考えた。それは○(丸)と数字を重ねて表記してしまう方法。重ねるのはletter-spacingで可能。○はそのまま重ねては小さいので、大きくし、少し下にずらして文字列の水平方向の中心を揃える。フォントはMSゴシックは○が不自然に太いので、とりあえずメイリオ指定。spanにclassを指定して、○を囲んでやればよい。続けて数字を置く。二桁数字用になるが、例えば、
.kasane {position: relative; top: 0.2em; font-size: 200%; letter-spacing: -0.87em; font-family: 'メイリオ';}
試してみたら、ChromeやSafariではうまくいったが、IEでは何かうまくいかない(無視されてしまうようだ)。ただ、その場合でも○に続けて数字が表記されるので、意味不明にはならない。
○にはユニコードで囲み文字用の○→⃝(←ブログにアップしてみたら表示されてない)が用意されている。そっちだと、元が少し大きめの丸になるようだ。ただ、こうした特殊なコードは何かと使いづらいものがある。