11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-03-09

こんにちは、stmkzaです。
イラレとかAdobe XDを見てCSSにするという作業、よくありますよね。
その時に、フォントが↓のような表示になっているのでかなり困りませんか?
image.png
正直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) タイプバンクのみ
  • モトヤの12・・・はW1W2・・・にそれぞれ対応します
  • タイプバンクのタイポスは目視確認するしかないようです
  • font-weightが---になってる場合は、たぶんfont-weightなどでは表せないので、デザイナーさんと相談して---になっていない太さに変更するか、文字を画像化してください
11
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?