@font-face для разных начертаний шрифта

[Catherine]

Доброго времени суток!

Подскажите, пожалуйста, как правильно подключать разные начертания одного шрифта?

Допустим, есть файлы шрифтов Font1-reg.ttf, Font1-mediumitalic.ttf, Font1-lightitalic.ttf, Font1-bold.ttf, Font1-blackitalic.ttf. Конвертирую и подключаю следующим образом:

@font-face {
    font-family: 'Font1';
    src: url('../fonts/font1-reg-webfont.eot');	
    src: url('../fonts/font1-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/font1-reg-webfont.woff') format('woff'),
		 url('../fonts/font1-reg-webfont.ttf') format('truetype'),
         url('../fonts/font1-reg-webfont.svg#Font1') format('svg');		 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Font1-MediumItalic';
    src: url('../fonts/font1-mediumitalic-webfont.eot');	
              ...		 
    font-weight: bolder;
    font-style: italic;
}
@font-face {
    font-family: 'Font1-LightItalic';
              ...		 
    font-weight: lighter;
    font-style: italic;
}

p {
    font-family: 'Font1-LightItalic', Arial, 'Helvetica CY', 'Nimbus Sans L', sans-serif;
    font-weight: lighter;
    font-style: italic;
}

1. А как все-таки правильно подключаются шрифты различных начертаний?

2. Как записать насыщенность для medium, black, light, ultrablack, thin, xthin?

3. Какие из начертаний являются специфичными и не всегда корректно отображаются в браузерах, а какие более стабильны?

Буду признательна за любой опытный совет, и особенно за ссылки на источники (русс, eng). Спасибо!

[Yazon_Nile]

1. Каждое начертание подключается отдельно в данном случае.

2. Если нужно сделать "моймегашрифт" ещё и больдовый, то для него отдельно генерируется шрифт "моймегашрифтБолд". И так далее.

Некоторые шрифты реагируют на запись font:bold 12px/15px "моймегашрифт"

Но такая запись не кроссбраузерна бывает.

[Catherine]

Спасибо за ответ!

Не совсем понятно, как же все-таки указывать насыщенность при подключении нестандартных шрифтов. Допустим есть шрифтBlack, шрифтBold, шрифтMedium, шрифтRegular, шрифтLight, шрифтThin.

При подключении этих шрифтов указываю:

{font-family: "шрифтBlack"; font-weight: bold;}
{font-family: "шрифтBold"; font-weight: bold;}
{font-family: "шрифтMedium"; font-weight: normal;}
{font-family: "шрифтRegular"; font-weight: normal;}
{font-family: "шрифтLight"; font-weight: lighter;}
{font-family: "шрифтThin"; font-weight: lighter;}

Это правильно?

Есть какие-либо правила и "подводные камни" при указании насыщенности в данном случае, или насыщенность подбирается исключительно экспериментальным путем, проверяя отображение каждого начертания шрифта в разных браузерах? Речь идет о кроссбраузерном отображении(IE7+, актуальные версии остальных популярных браузеров).

[Yazon_Nile]

Это правильно?

Нет. Вы не поняли

Допустим есть шрифтBlack, шрифтBold, шрифтMedium, шрифтRegular, шрифтLight, шрифтThin.

Нужно так:

@font-face {
    font-family: 'MyFont';
    src: url('../fonts/myfont.eot'); 
    src: url('../fonts/myfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/myfont.woff') format('woff'),
         url('../fonts/myfont.ttf') format('truetype'),
         url('../fonts/myfont.svg#Font1') format('svg');              
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'MyMontBold';
    src: url('../fonts/myfontBold.eot');        
              ...                
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MyMontItalic';
              ...                
    font-weight: normal;
    font-style: normal;
}

и тд.

Дано текст

Dear <strong>Frank</strong>, nice to meet you

Dear Frank, nice to meet you

Стили шрифтов к нему буду выглядеть так:

p{font-family:'MyFont', sans-serif;}
p strong{font-family:'MyFontBold', sans-serif;}

Думаю, с этим не должно быть проблем - тема простая

[Catherine]

Спасибо за ответ! Буду разбираться! Искать подводные камни - моя вредная привычка

Edited June 6, 2012 by Catherine

[SelenIT]

Bolder и lighter — это "жирнее" и "тоньше" относительно текущего. Для Thin, Light и т.п. можно использовать числовые значения (как-то так). Важно, чтобы заданный font-weight для @font-face совпадал с font-weight у элемента, для которого этот @font-face применяется (иначе браузеры некрасиво и все по-разному пытаются сжимать/раздувать шрифты сами: статья раз, статья два).

По крайней мере, насколько я сам это понимаю

[Catherine]

SelenIT, спасибо Вам за пояснения и за полезные ссылки!

То, что стиль и начертание объявляемого шрифта должны совпадать со стилем и начертанием в месте использования, это я уже поняла. В разных источниках разные варианты подключения и использования нестандартных шрифтов, не дающие однозначного ответа для различных начертаний, ну и совсем сбила с толку меня статья от John Daggett. Рада была получить дополнительную информацию для более детального изучения вопроса!