Почему я должен объявлять определенные варианты жирным шрифтом / курсивом для веб-шрифта? - PullRequest
Новая
       0

Почему я должен объявлять определенные варианты жирным шрифтом / курсивом для веб-шрифта?

2 голосов
/ 11 февраля 2012

Я пытаюсь использовать шрифт Ubuntu на веб-сайте. Я использую генератор FontSquirrel @ font-face. На компьютерах, где установлен шрифт Ubuntu, все работает нормально, когда у меня просто есть css вроде font-family: Ubuntu. Но на других компьютерах он не будет работать, если я не укажу явно, какой именно сорт мне нужен, например font-family: UbuntuRegular или font-family: UbuntuBoldItalic Это одинаковая ситуация во всех браузерах.

Глупо каждый раз указывать вес и стиль. Разве нет способа просто объявить общее семейство шрифтов и автоматически использовать жирные и курсивные грани при необходимости?

1 Ответ

2 голосов
/ 12 февраля 2012

Большинство генераторов @ font-face устанавливают font-weight и font-style на normal и используют отдельные объявления для каждого weight / style для обратной совместимости. Но вы можете переписать объявления, чтобы использовать одно и то же имя семейства для каждого варианта, меняя, где это необходимо, только font-weight и font-style, например, 

@font-face { /* Regular */
font-family: 'Klavika';
src: url('klavika-regular-webfont.eot');
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavika-regular-webfont.woff') format('woff'),
     url('klavika-regular-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}

@font-face { /* Bold */
font-family: 'Klavika';
src: url('klavika-bold-webfont.eot');
src: url('klavika-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavika-bold-webfont.woff') format('woff'),
     url('klavika-bold-webfont.ttf') format('truetype'),
font-weight: bold;
font-style: normal;
}

Так что H1 должен наследовать жирный вес без необходимости указывать вес: 

h1{ font-family: 'Klavika';}

456 В Berea St есть хороший пост, детализирующий реализацию (и совместимость): http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

...