Webフォントの設定
@font-face
でフォントを指定する時、font-family
を同じ名前にして、font-weight
とfont-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-weight
やfont-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-weight
はnormal
かbold
、または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