Font – NILX.ORG

フォント周りの指定

今指定している仕様。

font-family (混植)
- 和文フォントに游ゴシック、ヒラギノ
- 欧文フォントにSegoe UI
- 三点リーダに和文フォント
  - 欧文フォント指定で三点リーダが下付きになる対策
font-feature-settings: “palt”
- 読みやすい文字詰め
letter-spacing: .5px
- でも詰まりすぎなので少し空ける
- NotoSansでは空きすぎるのでPCのみに適用
text-shadow: 0 0 #(淡色)
- Winで游ゴシックが細くなる対策
word-break: break-all
- 要素の右端でのみ自動改行する

メイリオをやめろ

特にMac使い、Win用にfont-family: Meiryo, "メイリオ"を指定するな。今は游ゴシックがあるのだから余計な事をしないでくれ。游ゴシックも”Medium”無しでは細すぎるのでとにかく気安く指定するんじゃない。

と唸りながらStylusでメイリオサイトにfont-family: "Hiragino Kaku Gothic Pro" !important;を設定する事に疲れ、@font-faceで全てのメイリオをヒラギノ角ゴにしてやろうと思った。

CSS適用

@font-face {
	font-family: "メイリオ";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

@font-face {
	font-family: "Meiryo";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

@font-face {
	font-family: "ＭＳ Ｐゴシック";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

@font-face {
	font-family: "MS P Gothic";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

それぞれsrcは任意の一行に絞る。
ついでにMS Pゴシックも入れた(価格.com等で指定されている)。

CSS Font Stylus Webブラウズ拡張機能