LoginSignup
3
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-28

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

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

image.png

ウェブ上で通常体とイタリック体が同じ幅で表示されるようにするためには、以下のように@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');    }

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

image.png

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2