2Like
HTML CSS で文字を縦書きできれいに表示したい
解決したいこと
現在webサイトを作成しているのですが、縦書きデザインで文字のバランスが悪くなってしまいその対応策が思い浮かばず詰まってしまっています。
該当箇所
.html
<div class="verticalWrite">
<h2>お知らせ</h2>
</div>
.css
@charset "utf-8";
/* Hannari */
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');
.verticalWrite{
writing-mode: vertical-rl;
font-family: "Hannari", serif;
font-size: 28px;
padding: 30px;
}
参考記事
https://www.webcreatorbox.com/tech/writing-mode
https://www.sejuku.net/blog/76881
最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。
0
2Answer
Comments
ざっと調べた限りですが、文字幅が異なるフォントを縦書きにすると、どうしてもずれる仕様のようです…
OpenTypeフォントであれば「font-feature-settings」を利用することで、縦書きにしたときのガタツキを改善できるそうです。
@Kobayashi0620
Questioner
https://note.com/daishin_sakuma/n/n7d219b8df3e1
こういったものにするのはむずかしそうですかね、、こちらのフォントであれば、縦書きにしてもずれはなさそうでした！
<style> @font-face { font-family: "my-font"; src: url(./HannariMincho-Regular.otf) format("opentype"); } .verticalWrite { writing-mode: vertical-rl; font-family: "my-font"; font-size: 28px; padding: 30px; } </style> <div class="verticalWrite"> <h2>お知らせ</h2> </div>@Kobayashi0620
Questionerありがとうございます
試してみます！
対象とするブラウザは何ですか？
0Like
Comments
@Kobayashi0620
Questionerchromeで考えています！