1. naoyeah

    Posted

    naoyeah
Changes in title
+画像の文字とデヴァイスフォントを合わせる(非推奨)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,40 @@
+##コーディングするときちょっと気になったフォントのこと
+フォント(本当)のことを言うと、コーディングする際にfont-familyのことなんてほとんど考えない。
+けど、背景画像に合わせてテキスト(デヴァイスフォント)を配置するとき、ふと気になって夜も眠れなくなってしまったのでとりあえず書いてみる。
+
+###具体的な例をあげると、
+・地域LPOとか言われるやつで地域別に訴求する文言を変えたいとき
+・キャンペーンをさも今しかやってませんみたいに言うとき
+
+![campaign.png](https://qiita-image-store.s3.amazonaws.com/0/106705/917fd890-24e2-947a-6996-c965cd987e00.png)
+
+要はこんな画像に毎月末の数字を動的に表示させるんだけど、
+…なんと!ぴったり合わせたはずのベースラインがずれている…??
+ということがありました。
+
+
+###MeiryoとHiraginoではベースラインの位置が違う
+既存のサイトで指定されていたのがこんな感じのスタイル
+
+```lang:css
+font-family:"Meiryo", "Hiragino Kaku Gothic Pro", Arial, Verdana, sans-serif;
+```
+で、調べてみたらMeiryoとHiraginoではベースラインの位置が違うらしい。
+というより「メイリオは特に広いディセンダを持っているようです。」とのことで、
+悪いのはどちらかというとメイリオだった。
+というお話。
+※ディセンダ=ベースラインの下のスペース
+
+###結論
+・背景画像の上に文字を重ねるときは、文章全部をデヴァイスフォントにしましょう。(画像に文字いれるな)
+・あるいは、1~2pxくらいずれてもいいようにテキストを入れる部分に余裕を持たせましょう。
+・動的に出す部分をテキストじゃなく画像にしましょう。
+(↑この場合、すごい数の画像がいるはずなので、めんどくさかったらあきらめましょう。)
+
+###余談
+そもそもなんでこーなったかというと、職場ではデヴァイスフォント(テキスト部分)=メイリオ だから。
+あと、コーダーのpcにはヒラギノが入っていないから。
+ヒラギノ入ってんのデザイナーくらいでしょ!スルーしよ、と思ったけどマックとかどーなの?(汗)
+結論としてはコーディングというよりデザインの問題みたいになっちゃったけど
+MSゴシックとかだったら位置がずれたりしないはず。
+他にもありそうだけど検証できない…