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,367
    Total Members
    3,128
    Most Online
    EugeneWebdev
    Newest Member
    EugeneWebdev
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Когда есть с кем, и есть куда, хожу на настольный теннис. Когда два раза в неделю, а когда и два раза в месяц. Сейчас в универе, где мы играли, отпуска, а другие места или ужасные (плиточный пол, например), или рано закрываются. Самая проблема — это найти себе напарника своего уровня, готового регулярно заниматься. Энтузиазм почему-то есть только у тех, кто ещё только учится ракетку держать, а я держать уже могу, мне надо играть учиться.
    • Увеличилась. Не 1000 долларов, конечно, и в рублях, но семье есть, что покушать. Меня держит то, что я больше ничего не умею. Продавцом в супермаркете я не выдержу, с людьми взаимодействовать вообще не люблю, у меня для этого менеджер, с которым я тоже не люблю взаимодействовать. По образованию мне положено работать на заводе, но нас в универе не учили ничему, что помогло бы сразу пойти и работать, дали только некоторые теоретические азы, которые я давно забыл. А для качественной работы, я считаю, нужно иметь не азы, а понимание сути происходящего. Лично я вообще не научился понимать, зачем в цепи, скажем, резистор стоит, или где его нужно поставить и зачем. Особенно, когда нам начинали рассказывать, и у каждого резистора по 2-3 назначения, эдак поставишь его куда-нибудь, а он аукнется смещением постоянного напряжения где-то в другом конце схемы.
      Новые фреймворки, можно сказать, не учу, хотя надо бы, без них я работу сменить не смогу, если приспичит, но у меня не остаётся моральных сил после работы ещё что-то учить. Я даже на велосипеде ездить перестал.
      В программировании у меня, к сожалению, тоже азы с некоторой специализацией в вёрстке. Я не знаю многих тонкостей, и никогда, например, не углублялся в такие темы, где понадобились бы Reflection в PHP. Или, например, я люблю использовать SQL-запросы вместо ORM, потому что польза ORM для меня не пересиливает их многословность и косноязычность. Я, конечно, понимаю, что если следовать принятым стандартам, то потом легче дорабатывать код, но я пришёл в разработку из домашних проектиков, и так и не научился наслаивать абстракции ради стандартов. А, скажем, вебпак только позавчера стал поковыривать, чтобы понимать, что в нём вообще происходит, а то он сейчас везде. Настолько некрупные проекты у меня всегда были, что мне хватало отдельных JS-файликов.

      И вообще, когда я с условного Delphi переходил на веб, то меня привлекало то, что не нужно ничего компилировать, не нужно ничего ставить, можно лишь запустить блокнот, а браузер уже есть на любом компьютере. Теперь этого ничего уже нет, постоянно то npm, то composer, сборка vue, сборка scss, когда без vue. У питонщиков и ноды, так вообще, веб-сервер является частью проекта, и чтобы что-то исправить, надо его перезапускать, а не как в PHP, просто файлик подправить. Веб перестал быть простым.
    • Всем привет. Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem. И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код: html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px. Но стоило изменить единицы измерения в высоте: html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px. Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit? И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
  • Popular Contributors