フォントに対する指定ってサイズとか色とか行間とか・・・そんな程度しか
知らなかったのですが、人様のコードなどを拝見していると
「それいいね！」っていう処理が施してあったりして、勉強になります。
ということでそんな処理まとめ。
文字の端をそろえる
フォントサイズや文字間の具合によって表示が変わっちゃうよねーと諦めてたんですが、
普通にこんな綺麗に揃えることができたんですね・・・。
See the Pen
文章の端をきれいに揃える by hiro (@hiro555)
on CodePen.
長い文を…で省略
ワードプレス などユーザーが自由に文字を入力できる場合に、設定しておくと便利。
長すぎるタイトルの全てを表示する必要がない場面(記事一覧)などで、…で省略してくれるとむやみに行数が増えないし、良いですね。
See the Pen
タイトルが長い場合…で省略 by hiro (@hiro555)
on CodePen.
行間を素敵に詰める
フォントによってはがっつり空いてしまう文字と文字との隙間。
letter-spacing: 0;だからこれ以上詰めれないもーーん
と知らん顔できなくなりますね。
自動カーニングって言うらしいです。
See the Pen
文字の間を詰める by hiro (@hiro555)
on CodePen.
IEの文字が上付きになる問題
前の記事でもちょっと書いたのですが、
デフォルトのフォントではなくfont family なんかでフォントを変更すると、
IEで文字が少し上に上がってしまうんです。
ボタンにした時に変！なので、IEだけに効くCSSを記述して対応。
_:lang(x)::-ms-backdrop, .selector { プロパティ: 値; }
別のハックもあるのですが、そちらよりももっと良いそうです(下の追記も併せてご覧ください)。
こちらのサイト様ありがとうございます〜。
游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証
追記：上記ハックで指定すると、Edgeでも反映されてしまいました。
IEだけが変だから修正したのにEdgeまで変更されてしまうと大変なので、
media all and (-ms-high-contrast:none){
*::-ms-backdrop, .指定したいクラス {
パラメーター: 値;
}とするとie11にのみ当たります。
ie対応、なんだかんだ時間がかかってしまいますね。。
