ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

游ゴシックの縦書きが揃わないとき!

, ,

JugemuJUGEMUGokoのSURIKIRE

JugemuJUGEMUGokoのSURIKIRE

 
※この記事は游ゴシックがインストールされてる端末で見てね!
上の縦書きテキストをごらんください。
それぞれ、cssでフォントを游ゴシックに、writing-modeで縦書きにしています。
左側のアルファベットがガタガタですね。
原因はcssのfont-feature-settings"palt"にしていたことでした。
font-feature-settingsを指定すると文字詰めできるのですが、縦書きにすると美しくそろわないことが判明しました。
游ゴシックで縦書きする場合は、font-feature-settings: initial;を指定しましょう。
 
チナミになる話・・・
font-feature-settings"palt"の他にもいろいろ指定できますが、グローバル値以外の場合はダブルクォーテーションで囲うのを忘れずに!

游ゴシックの縦書きが揃わないとき! #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #文字詰め #縦書き

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。