キービジュアルなどで文字を縦書きにするデザインってありますよね。
writing-mode: vertical-rl;を使って縦書きにした時に、文字がなんだかガタガタしてしまう時があります。
そんな時は下記のようにfont-feature-settings: ‘pkna’;を一緒に設定することによって回避することができます。
-webkit-font-feature-settings: 'pkna';
font-feature-settings: 'pkna';
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;font-feature-settings: ‘pkna’;は文字詰めをしてくれるcssです。
ただ、font-feature-settings: ‘pkna’;を指定してしまうと文字間が制御されてしまうため、
letter-spacingが効かなくなってしまいます。
そこで、各文字を1文字ずつspanに囲んでそのspanにletter-spacingを指定することによってデザイン通りの表示にすることができます。
<p><span>未</span><span>来</span><span>を</span><span>ソ</span><span>フ</span><span>ト</span><span>で</span><span>ハ</span><span>ッ</span><span>ピ</span><span>ー</span><span>に</span></p>p {
background: #fff;
border: 1px solid #0B63AB;
color: #0B63AB;
-webkit-font-feature-settings: 'pkna';
font-feature-settings: 'pkna';
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-size:20px;
line-height: 1;
position:absolute;
right: 10%;
top: 18.2%;
padding: 18px 10px;
z-index: 2;
font-weight: bold;
}
p span {
letter-spacing:0.6em;
}もし、ずれてるなって感じた時はやってみてください！
コメント