毎日Learning

学んだことを共有します

font-familyって何指定するのが良いのかなーって調べてとりあえずこれに決めた

今更感まるだしの内容ですが、font-familyって何を指定すると良いのか、明確に「僕はこれでいきます!」的な答えを今まで持ちあわせていなかった。

そしたら、仕事関係で、円マーク(¥)がバックスラッシュ(\)で表示されるから困る。

的な課題があって、それって日本語フォントの問題じゃね?って。

じゃあfont-familyどうするよ?って。

今までのんじゃちゃんと出ねーし、どうする?って。

なったので、ちょっと調べた。

とりあえず、

body {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}

に決めた!

ちなみに、 Bootstrap を使っている場合は、以下のCSSをbootstrap.cssより後に読み込ませてやれば、表示されるフォントは思い通りに切り替えられるっぽい。

body {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
pre {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
input,
button,
select,
textarea {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
.navbar-search .search-query {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}