Каков правильный способ использования шрифта CSS3?

Question

Может кто-то, пожалуйста, помогите мне понять, как правильно использовать шрифт CSS3. Ниже приведены некоторые описания шрифтов, которые правильны и почему?

/* START OF SAMPLE CODE # 1 */ 
@font-face { 
    font-family: 'WebFont'; 
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), 
     url('webfont.woff') format('woff'), 
     url('webfont.ttf') format('truetype'), 
     url('webfont.svg#WebFont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'WebFont'; 
    src: url('webfont-bold.eot'); 
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'), 
     url('webfont-bold.woff') format('woff'), 
     url('webfont-bold.ttf') format('truetype'), 
     url('webfont-bold.svg#WebFont-Bold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
h1 { 
    font-family: 'WebFont', blah, blah, blah; 
    font-weight: bold; 
} 
h2 { 
    font-family: 'WebFont', blah, blah, blah; 
    font-weight: normal; 
} 
/* END OF SAMPLE CODE # 1 */ 

=========

/* START OF SAMPLE CODE # 2 */ 
@font-face { 
    font-family: 'WebFont'; 
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), 
     url('webfont.woff') format('woff'), 
     url('webfont.ttf') format('truetype'), 
     url('webfont.svg#WebFont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'WebFontBold'; 
    src: url('webfont-bold.eot'); 
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'), 
     url('webfont-bold.woff') format('woff'), 
     url('webfont-bold.ttf') format('truetype'), 
     url('webfont-bold.svg#WebFont-Bold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
h1 { 
    font-family: 'WebFontBold', blah, blah, blah; 
    font-weight: normal; 
} 
h2 { 
    font-family: 'WebFont', blah, blah, blah; 
    font-weight: normal; 
} 
/* END OF SAMPLE CODE # 2 */ 

=========

/* START OF SAMPLE CODE # 3 */ 
@font-face { 
    font-family: 'WebFont'; 
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), 
     url('webfont.woff') format('woff'), 
     url('webfont.ttf') format('truetype'), 
     url('webfont.svg#WebFont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'WebFontBold'; 
    src: url('webfont-bold.eot'); 
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'), 
     url('webfont-bold.woff') format('woff'), 
     url('webfont-bold.ttf') format('truetype'), 
     url('webfont-bold.svg#WebFont-Bold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
h1 { 
    font-family: 'WebFontBold', blah, blah, blah; 
    font-weight: bold; 
} 
h2 { 
    font-family: 'WebFont', blah, blah, blah; 
    font-weight: normal; 
} 
/* END OF SAMPLE CODE # 3 */ 

Различие в этих образцах кода, это путь " Bold "объявляется и используется. Пожалуйста, сообщите, какой из них правильный и почему?

PS: Извините за такой длинный вопрос/образец. Я просто хотел предоставить как можно больше информации, чтобы избежать путаницы.

Edit 1: Несмотря на то, как было упомянуто @Jukka в одном из приведенных ниже ответов, логический подход заключается в использовании «Code # 1», но я только что проверил Safari и жирный шрифт делает слишком много смелее на Safari по сравнению с другими браузерами, но если я использую «Код №2», все браузеры отображают то же самое, так что, похоже, что что-то происходит за кулисами при использовании разных выражений шрифта. Так что в этот момент мне кажется, что «Код №2» - это способ пойти, что сказать!

Answer 1

Ни один из кодов не является правильным, поскольку кавычки не допускаются вокруг ключевых слов bold и normal в соответствии с синтаксисом CSS. В противном случае код 1 основан на логических принципах, поскольку он задает два шрифта, нормальные и полужирные, как имеющие одинаковое семейство шрифтов, как они, по-видимому, есть. Другие коды объявляют каждый шрифт, как если бы это было семейство шрифтов. Используемый с должной осторожностью, этот подход также работает.

Основное практическое отличие состоит в том, что с использованием логического подхода (код 1) вы можете просто объявить font-family: WebFont, Foobar, даже для всех элементов, если хотите, и полужирный шрифт автоматически будет использоваться для тех элементов, которые установлены на них: font-weight: bold (по умолчанию для браузера, например, для h1 или с помощью явной настройки). Это также означает, что если семейство шрифтов WebFont не используется по какой-либо причине (например, настройка браузера, которая отвергает загружаемые шрифты), будет использоваться соответствующий шрифт (обычный или полужирный) шрифта Foobar.