48
53

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.

Webフォントで複数のウェイトやスタイルを持つ書体を定義する

Posted at

Webフォントの設定

@font-faceでフォントを指定する時、font-familyを同じ名前にして、font-weightfont-normalを使用するフォントに合わせる。

/*medium*/
@font-face {
	font-family: 'myfont';
	src: url('fonts/myfont-medium.woff') format('woff'),
			 url('fonts/myfont-medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
/*light*/
@font-face {
	font-family: 'myfont';
	src: url('fonts/myfont-light.woff') format('woff'),
			 url('fonts/myfont-light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
/*bold-italic*/
@font-face {
	font-family: 'myfont';
	src: url('fonts/myfont-bold-italic.woff') format('woff'),
			 url('fonts/myfont-bold-italic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
}

使う時

font-familyを上記で指定したフォント名にして、font-weightfont-styleの値を適時指定する。

/*myfont-mediumを指定する*/
.hoge{
	font-family: 'myfont';
	font-weight: 500;
}

/*myfont-lightを指定する*/
.foo{
	font-family: 'myfont';
	font-weight: 300;
}

/*myfont-blold-italicを指定する*/
.bar{
	font-family: 'myfont';
	font-weight:700;
	font-style: italic;
}

備考

font-weightnormalbold、または100〜900の数値で指定する。
数値とウェイトの関係は以下のとおり。

数値 ウェイト
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

※下記サイトを参考にしてる
font-weight - CSS | MDN

48
53
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
48
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?