Qiita 上では sytle タグが入れられないようなので URL末尾に .md を付加して手元の Markdown プレビュアーで確認することにする
CSSでキレイな日本語フォントの明朝とゴシック | Ri-mode Memo
を参考にさせて頂いた。
分かりやすくするため、フォントサイズを 2.4rem ぐらいで。
.font-size-big {
font-size: 2.4rem;
}
.mincho {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
font-size: 2.4rem;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.mincho
<p class="font-size-big mincho">
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
</p>
あのイーハトーヴォの すきとおった風、 夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモリーオ市、 郊外のぎらぎらひかる草の波。
.mincho.bold
<p class="font-size-big mincho bold">
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
</p>
あのイーハトーヴォの すきとおった風、 夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモリーオ市、 郊外のぎらぎらひかる草の波。
- Mac 環境ではボールド指定しても効かない
-
ヒラギノ明朝 ProN W6に太字フォントが無い？
.mincho.italic
<p class="font-size-big mincho italic">
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
</p>
あのイーハトーヴォの すきとおった風、 夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモリーオ市、 郊外のぎらぎらひかる草の波。
.mincho.bold.italic
<p class="font-size-big mincho bold italic">
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
</p>
あのイーハトーヴォの すきとおった風、 夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモリーオ市、 郊外のぎらぎらひかる草の波。
- イタリックすると、ボールドとノーマルの区別が付くようになってる
- 斜体があるフォントにスイッチしてこうなるのか？
"ヒラギノ明朝 ProN W3", "HiraMinProN-W3" を使ってみる
.mincho-normal {
font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
<p class="font-size-big mincho-normal">
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
</p>
あのイーハトーヴォの すきとおった風、 夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモリーオ市、 郊外のぎらぎらひかる草の波。
ヒラギノ明朝 ProN W3 の方にボールド指定してみる
<p class="font-size-big mincho-normal bold">
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
</p>
あのイーハトーヴォの すきとおった風、 夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモリーオ市、 郊外のぎらぎらひかる草の波。
- ボールドになった。
結論
本来どうあるべきかはちゃんと調べてないので…アレですが…
ヒラギノ明朝 ProN W6 が通常の状態でボールドであるなら、
使い勝手を考えると ヒラギノ明朝 ProN W3 を指定したほうが
コントロールが効かせやすいような気がしました。
おわり。