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

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

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


css webfonts font-face
person Moss    schedule 11.02.2012    source источник
comment
Ну, я не уверен, но я также использую собственный шрифт «SansationRegular» в окнах с помощью генератора шрифтов, и если я не укажу состояние (стиль, вес) или не укажу вес: жирный шрифт становится тонким (выглядит нормально ), но когда я использую font-weight:normal, он становится немного жирным.   -  person The Alpha    schedule 12.02.2012

Ответы (1)


arrow_upward
4
arrow_downward

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

@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 есть хороший пост с подробным описанием реализации (и совместимости): ://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

person mgcross    schedule 11.02.2012
comment
Отлично. И хорошая статья. По какой-то причине я не понял, что вы устанавливаете имя шрифта как хотите с помощью объявления @font-face. На мой взгляд, Font Squirrel следует обновить свою таблицу стилей или, по крайней мере, предложить альтернативную версию. - person Moss; 12.02.2012
comment
Большое спасибо за эту информацию; именно то, что я тоже искал. - person nickpish; 24.09.2013