フォントフェイスを変更するには

Question

私は何をしようとしているのですか？新しいタイプのフォントを自分のウェブサイトに追加することですが、問題は残っています。Open Sansの4種類のテキストから追加する必要があります。

太字、標準、太字、イタリック

以前は既に他のフォントを追加していましたが、常に別のファミリのものでした。これは私のコードです：

@font-face { font-family: 'Josefin'; src: url("font/Josefin.ttf"); } 
@font-face { font-family: 'Roboto'; src: url("font/Roboto.ttf"); } 
/* 
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-Regular.ttf"); } 
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-Bold.ttf"); } 
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-BoldItalic.ttf"); } 
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-Italic.ttf"); } 
*/ 

h1, h2, h3, h4, h5, .bold{ font-family: 'Josefin'; } 
p, li, ul, ol, a, .light{ font-family: 'Roboto'; } 

私は「OpenSans-斜体」にそれらを変更しようとしましたが、私は特定のフォントを呼び出す方法がわからない時間タグ。

Answer 1

@font-face { 
font-family: 'OpenSans'; 
font-weight: normal; 
font-style: normal; 
src: url('OpenSans-Regular.eot#') format('eot'), 
       url('OpenSans-Regular.woff') format('woff'), 
       url('OpenSans-Regular.ttf') format('truetype'), 
       url('OpenSans-Regular.svg#svgOpenSans') format('svg'); 
} 

@font-face { 
font-family: 'OpenSans'; 
font-weight: bold; 
font-style: normal; 
src: url('OpenSans-Bold.eot#') format('eot'), 
       url('OpenSans-Bold.woff') format('woff'), 
       url('OpenSans-Bold.ttf') format('truetype'), 
       url('OpenSans-Bold.svg#svgOpenSans') format('svg'); 
} 

@font-face { 
font-family: 'OpenSans'; 
font-weight: bold; 
font-style: italic; 
src: url('OpenSans-BoldItalic.eot#') format('eot'), 
       url('OpenSans-BoldItalic.woff') format('woff'), 
       url('OpenSans-BoldItalic.ttf') format('truetype'), 
       url('OpenSans-BoldItalic.svg#svgOpenSans') format('svg'); 
} 

@font-face { 
font-family: 'OpenSans'; 
font-weight: normal; 
font-style: italic; 
src: url('OpenSans-Italic.eot#') format('eot'), 
       url('OpenSans-Italic.woff') format('woff'), 
       url('OpenSans-Italic.ttf') format('truetype'), 
       url('OpenSans-Italic.svg#svgOpenSans') format('svg'); 
} 

Answer 2

基本的に、一部のフォントファミリでは、別のフォントファミリを読み込む必要があります。太字の場合は差分を読み込みます。ファイルを、イタリックフォントの場合はdiffをロードする必要があります。ウェブ/カスタムフォントをロードするための正しい方法は

@font-face { 
    font-family: my_bold_fonts; 
    src: url(path_to_font_file_for_bold.woff); 
    font-weight: bold; 
} 
@font-face { 
    font-family: my_italic_fonts; 
    src: url(path_to_font_file_for_italic.woff); 
    font-weight: normal; 
    font-style: italic; 
} 

であり、あなたがH1

太字フォントを使用している場合も同様に、他のフォント重量を

今、あなたが使用する必要があり

を提出

h1 { 
    font-family: my_bold_fonts; 
} 

また、斜体が必要な場合はh2（またはその他の要素）の場合SE

h2 { 
font-family: my_italic_fonts; 
}