Catherine

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

Recommended Posts

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

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

Допустим, есть файлы шрифтов 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). Спасибо!

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

Не совсем понятно, как же все-таки указывать насыщенность при подключении нестандартных шрифтов. Допустим есть шрифт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+, актуальные версии остальных популярных браузеров).

Share this post


Link to post
Share on other sites
Это правильно?

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

Допустим есть шрифт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;}

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

Share this post


Link to post
Share on other sites

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

Edited by Catherine

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,514
    Total Members
    3,128
    Most Online
    e1pavlovitch
    Newest Member
    e1pavlovitch
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.