こんにちは、stmkzaです。
イラレとかAdobe XDを見てCSSにするという作業、よくありますよね。
その時に、フォントが↓のような表示になっているのでかなり困りませんか？
正直DBとかってあっても、何を指定すればいいのか分かりませんよね。
目視でfont-weightに何を指定したら同じ見た目になるかチェックしてもいいのですが、正直面倒ですよね？
そこで、対応表を作りました。どうぞご利用ください。
対応表
| font-weight | W? | ISO表記 | その他の表記 | その他の表記 | 備考 |
|---|---|---|---|---|---|
| 100 | W1 | UL(Ultra Light) | |||
| 200 | W2 | EL(Extra Light) | SL(Super Light) | ||
| --- | -- | 2B | モトヤのみ | ||
| 300 | W3 | L(Light) | |||
| 400 | W4 | SL(Semi Light) | R(Regular) | ||
| 500 | W5 | M(Medium) | |||
| 600 | W6 | SB(Semi Bold) | DB(Demi Bold) | D(Demi Boldの略) | |
| 700 | W7 | B(Bold) | |||
| --- | -- | DE(Demi Extra Bold) | タイプバンクのみ | ||
| 800 | W8 | EB(Extra Bold) | E(Extra Boldの略) | ||
| --- | -- | H(Heavy) | モリサワ・タイプバンク | ||
| --- | -- | EH(Extra Heavy) | モリサワのみ | ||
| 900 | W9 | UB(Ultra Bold) | U(Ultra Boldの略) | ||
| --- | -- | SU(Super Ultra Bold) | タイプバンクのみ |
- モトヤの
1、2・・・はW1、W2・・・にそれぞれ対応します - タイプバンクのタイポスは目視確認するしかないようです
- font-weightが
---になってる場合は、たぶんfont-weightなどでは表せないので、デザイナーさんと相談して---になっていない太さに変更するか、文字を画像化してください