Roboto Monoは通常体とイタリック体の幅が等しくない

3455 ワード
CSS font CSS テキストリンク

「ほう、Roboto Monoですか、たいしたものですね。Roboto Monoは可読性がきわめて高いらしく、OSのクリーンインストール直後にインストールするプログラマーもいるくらいです」

といいたいところだが、実はRoboto Monoは通常体と筆記体（以下イタリック体）の幅が等しくない。なので並べると以下の様になってしまう。

ウェブ上で通常体とイタリック体が同じ幅で表示されるようにするためには、以下のように@font-faceを設定してやればよい。

@font-face { font-family: 'Roboto Mono'; font-weight: 100; src: local('RobotoMono-Thin');    }
@font-face { font-family: 'Roboto Mono'; font-weight: 300; src: local('RobotoMono-Light');   }
@font-face { font-family: 'Roboto Mono'; font-weight: 400; src: local('RobotoMono-Regular'); }
@font-face { font-family: 'Roboto Mono'; font-weight: 500; src: local('RobotoMono-Medium');  }
@font-face { font-family: 'Roboto Mono'; font-weight: 700; src: local('RobotoMono-Bold');    }

こうすればイタリック体の表示に使われるリソースが通常体でオーバーライドされる。

ちなみにこの問題はすでにIssueとして具申されている。