Font Squirrel を使用して、フォントを使用可能な Web バージョンに変換しています。各重みを個別に変換して css に含める必要はありません (これらすべての呼び出しで多くの肥大化が追加されます)。
複数のウェイトを 1 つのフォントにパッケージ化し、font-weight プロパティを使用して正しい文字を適切に呼び出す方法はありますか?
ここでは、偽の太字と偽の斜体を避けようとしています。
Ennuiの答えをバックアップするには、次のようにします。
@font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font.eot');
src: local('☺'), url('fonts/SF Your Font.woff') format('woff'), url('fonts/SF Your Font.ttf') format('truetype'), url('fonts/SF Your Font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font Bold.eot');
src: local('☺'), url('fonts/SF Your Font Bold.woff') format('woff'), url('fonts/SF Your Font Bold.ttf') format('truetype'), url('fonts/SF Your Font Bold.svg') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font Italic.eot');
src: local('☺'), url('fonts/SF Your Font Italic.woff') format('woff'), url('fonts/SF Your Font Italic.ttf') format('truetype'), url('fonts/SF Your Font Italic.svg') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font Bold Italic.eot');
src: local('☺'), url('fonts/SF Your Font Bold Italic.woff') format('woff'), url('fonts/SF Your Font Bold Italic.ttf') format('truetype'), url('fonts/SF Your Font Bold Italic.svg') format('svg');
font-weight: bold;
font-style: italic;
}
個別のフォントを作成する方法は実際にはありませんが、font-weight
およびfont-style
属性を使用すると、呼び出しを減らすことができます。font-family
一度宣言するだけです。