イラレのフォント名からCSSのfont-weightに何を指定すればいいのか

ブログ

今回もまた、前日にブログのことに気づいた上にいい感じのネタが思いつかなかったので、昔書いたQiitaの記事の転載です。
イラレのフォント名からCSSのfont-weightに何を指定すればいいのか

こんにちは、stmkzaです。
イラレとかAdobe XDを見てCSSにするという作業、よくありますよね。
その時に、フォントが↓のような表示になっているのでかなり困りませんか?

正直DBとかってあっても、何を指定すればいいのか分かりませんよね。
目視でfont-weightに何を指定したら同じ見た目になるかチェックしてもいいのですが、正直面倒ですよね?
そこで、対応表を作りました。どうぞご利用ください。

対応表

font-weightW?ISO表記その他の表記その他の表記備考
100W1UL(Ultra Light)
200W2EL(Extra Light)SL(Super Light)
2Bモトヤのみ
300W3L(Light)
400W4SL(Semi Light)R(Regular)
500W5M(Medium)
600W6SB(Semi Bold)DB(Demi Bold)D(Demi Boldの略)
700W7B(Bold)
DE(Demi Extra Bold)タイプバンクのみ
800W8EB(Extra Bold)E(Extra Boldの略)
H(Heavy)モリサワ・タイプバンク
EH(Extra Heavy)モリサワのみ
900W9UB(Ultra Bold)U(Ultra Boldの略)
SU(Super Ultra Bold)タイプバンクのみ
  • モトヤの12・・・はW1W2・・・にそれぞれ対応します
  • タイプバンクのタイポスは目視確認するしかないようです
  • font-weightが---になってる場合は、たぶんfont-weightなどでは表せないので、デザイナーさんと相談して---になっていない太さに変更するか、文字を画像化してください

コメント

タイトルとURLをコピーしました