webサイトのデバイスフォントを美しく見せるために有効な設定まとめ

名称未設定-1

●自動カーニングCSS設定
本文にやると詰まりすぎるのでletter-spacingで字間を少し広げるといい。
文字詰めできるCSSのfont-feature-settingsが凄い!日本語フォントこそ指定したい自動カーニング
https://ics.media/entry/14087

 

●「」などの頭を揃えるjs
「」や『』など約物が半角にできる、Yaku Han JP のご紹介
http://taneakashi.ad-mk.com/yaku-han-jp-introduction.html

 

●テキストの箱組みを綺麗にするcss設定
テキストの箱組みをしたい時に使えるCSS
https://www.pressmantech.com/tech/coding/1551#css-text-justfy

※英語の改行でおかしくなるのでこれを効かせたら
長めの英語の文言周りをチェックする必要がある。

 

●文字の太さが勝手に太くなっちゃう場合がある時の対応方法
Safari,Chromeで文字が太くなる現象の解消
https://qiita.com/artprojectteam/items/7bb1f042d163ebd109a1
firefoxにも効かせたいのでこれも設定する
https://qiita.com/htomine/items/3086f30ca09adea2f8e0

 

●自分で細かく詰める場合
一文字づつ詰めるのは費用対効果として悪いので
SVGにしてしまった方がいいのですが、
どうしても対応しなければならない場合こちら。
HTMLでカーニング!手軽に文字詰めできる「FLAutoKerning.js」
https://liginc.co.jp/designer/archives/8981


Leave a Comment.

CAPTCHA


post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)