Шрифт с помощью @font-face

Question

[Artqookie]

Допустим, есть четыре начертания шрифта Ubuntu Family: Regular, Bold, Italic, Bolditalic. Хочу я воспользоваться @font-face в CSS. Как нужно прикручивать? Неужели каждое начертание по отдельности… Тогда получится, что-то типа такого, продублированное 4 раза (генерировал с помощью @FONT-FACE GENERATOR)?

@font-face {
	font-family: 'UbuntuRegular';
	src: url('regular-webfont.eot');
	src: local('☺'),
	url('regular-webfont.woff') format('woff'),
	url('regular-webfont.ttf') format('truetype'),
	url('regular-webfont.svg#webfontVgT726QZ') format('svg');
	font-weight: normal;
	font-style: normal;
}

Может быть есть способ как-то объединить эти четыре начертания в одно?

Comments

[Artqookie]

Тем же @font-face generator'ом можно внедрить шрифты в сам CSS с помощью Base64. Какой способ действеннее: подключать файлы шрифтов или воспользоваться Base64?

Answer 1

[Serator]

А смысл woff, truetype и svg? Насколько я знаю, нет таких браузеров, которые поддерживают только woff, аль только svg.., так зачем городить?

Comments

[Artqookie]

Может быть вы и правы. Если судить по этой таблице получается, что можно использовать лишь TTF и EOT (а стоит ли его?). Забить на iOS с SVG, также потерять поддержку Оперы 9-х версий, на что тоже, думаю, внимания обращать не стоит, так как тематика сайта предполагает несколько продвинутых пользователей, которые способны обновить свой бразуер.

[Artqookie]

Таблица:

[Serator]

Интересно, я покопался в гугле по вашему вопросу. Но в сим изображении есть дефекты. Как я понимаю это www.html5rocks.com/tutorials/webfonts/quick/. Но в Firefox, насколько мне известно, никогда не было svg-шрифтов, во всяком случае в релизах. Ну а про iOS не знал. Попробовал на ttf, не получилось. SVG всем хорош, но увы, Firefox его не держит и в 40ой версии скорее всего держать не будет :(.

[Serator]

Кстати на developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html поддержки @font-face браузером на iOS вообще не значится, что странно.

[Artqookie]

Просвещался этим топиком — http://habrahabr.ru/blogs/webdev/104182/. Спасибо вам за информацию.

[Mithgol]

Не рекомендую ограничиваться только TTF и EOT хотя бы потому, что TTF больше WOFF по объёму. Попробуйте, например, скачать архив PTSansWeb.zip, и тотчас увидите, что для этого шрифта разница по объёму в четыре и даже пять раз. Давая читателям возможность скачивать WOFF, Вы значительно ускоряете отображение желаемого вида сайта в Firefox или Chrome.

Answer 2

[slamduck]

Я за использование Cufon. У font-face много нюансов, которые не так просто решить.

Answer 3

[ChemAli]

<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold,bolditalic&subset=cyrillic,latin' rel='stylesheet' type='text/css'>

И все.

Comments

[psylostlife]

И «Resource interpreted as Font but transferred with MIME type font/woff». Или вам норм?

P.S.
Я жесткий некропостер, однако проблема встала колом.

[Роман Якушев]

ага, а если шрифта нет в гуглошрифтах?....

Answer 4

[SilentImp]

Base64, если я правильно понял о чем речь (datauri), ограничен ~20кб.
Этого может не хватить.
Кроме того вы как то не учитываете что если вы внедрите все в CSS, то будут подгружаться все варианты (woff,ttf… ) а использоваться будет только один.
Так что грузите как файлы.
У вас вряд ли будет настолько много шрифтов, что количество http запросов для их получения будет сказываться на быстродействии сайта.

Comments

[Artqookie]

Я так понимаю, Хром скачает себе только TTF (или OTF или WOFF, не знаю, что у него там приоритетнее), а, допустим Опера только TTF (или OTF или SVG)? То есть за раз я впарю юзеру всего ≈160 кб шрифтов, а не ≈640?

Количество запросов в данном случае не очень волнует, нужны только эти четыре начертания.

[lugansk]

>> Base64, если я правильно понял о чем речь (datauri), ограничен ~20кб.
Этого может не хватить.

Ограничение только в ИЕ, в котором и так ничего не заработает в данном случае. В остальных браузерах может и заработать.
По поводу объёма данных в data uri пытался разобраться здесь.

Answer 5

[SilentImp]

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

Кстати, как у Ubuntu Family со сглаживанием при использовании его в виде web-font'а?
Если так же хреново как у 99% шрифтов, то можете еще
CUFON cufon.shoqolate.com/generate/
попробовать.

Есть куча минусов, но в плане внешнего вида серьезно выигрывает.

Comments

[Artqookie]

Отдельными, в этом весь вопрос. Будет ли накладно в плане производительности и размера.

Вы, наверное, о сглаживании в виндах. По-моему, прилично так сглаживается, даже там, вот страничку опубликую с примерами.

Если не изменяет память, то при использовании куфона, нельзя выделять текст… Ну не, такого я себе позволить не могу :-)

Answer 6

[onthefly]

В этом обсуждении все путают начертание шрифта и файл шрифта.

Обратите внимание, что начертание — это свойство рисунка шрифта, например прямое, светлое, наклонное, полужирное. В CSS им соответствуют свойства font-style и font-weight.

Файл шрифта может включать в себя сколь угодно большое количество начертание, хоть всё семейство (гарнитуру).

По существу вопроса я бы мог рекомендовать исключить svg-версию шрифта и остановиться на трёх файлах.