Как настроить @font-face?

Question

[Степан Зубашев]

Из всех доступных способов встраивания нестандартных шрифтов на страницу мне больше всего нравится font-face. За то, что он везде работает, позволяет выделить и скопировать текст, функционирует в «визивигах» и т.д. Вот только 1 беда не даёт мне покоя. Надписи выглядят везде по разному, и, чаще всего, ужасно или просто кошмарно.

Сейчас я верстаю сайт, который использует LeagueGothicCyrillic. Изначально я располагаю форматом ttf, через font2web я получаю все остальные форматы. В тестовой же HTML начертание оставляет желать лучшего. Примеры:

1. Chrome, winXP SP2 —
2. Chromium, Xubuntu12 —
3. Opera12, winXP SP2 —
4. Opera12, Xubuntu12 —
5. Chrome, win7 —
6. IE9, win7 —
7. PS5 —

Такие же проблемы были и с Helvetica, и, я так подозреваю, со всеми шрифтами, которые мне придётся встраивать. В пределах font-face ничего сделать нельзя? Остаётся только Cufon и компания?

=== решение ===

Следует поиграть с расположением шрифтов в font-face. У меня наиболее оптимальным вышел вариант:

@mixin font_inline( $name, $filename )
{
	@font-face {
		font-family: $name;
		src: url('../fonts/#{$filename}.eot?##{$name}') format('eof');
	}
	@font-face {
		font-family: $name;
		src: local('☺'),
			inline-font-files('#{$filename}.ttf', truetype ),
			url('../fonts/#{$filename}.woff?#reforma') format('woff'),
			inline-font-files('#{$filename}.otf', opentype );
		font-weight: normal;
		font-style: normal;
	}
}

Answer 1

[marcus]

Везде свое сглаживание. Ничего с этим не поделать, метод задания шрифта ни при чем.

Comments

[Назар Мокринский]

И даже в одном и том же браузере на разных платформах будут отличия, с этим ничего не поделать. Одинаковость можно сделать только изображением.

[Степан Зубашев]

Сверху — @font-face. Снизу — установил шрифт и назначил напрямую в font-family. ОС — WinXP SP2, браузер — Chrome. Обе <div> расположены на одной и той же странице друг за другом.

[Степан Зубашев]

nazarpc, а как насчёт в одном и том же браузере, в одной и той же вкладке, в рядом стоящих <div>-ах? Дело именно в «методе задания шрифта».

[Назар Мокринский]

Похоже на баг браузера, рендеринг шрифта не должен отличаться от типа его указания. Вы могли бы сделать такой же скриншот в Opera?

[Степан Зубашев]

Opera 12.01, WinXP SP2. Тоже самое.

[Степан Зубашев]

Похоже на баг браузера, рендеринг шрифта не должен отличаться от типа его указания. Вы могли бы сделать такой же скриншот в Opera?

Тоже самое даже с Helvetica Neue. Т.е. известным шрифтом. И с ReformaGroteskDemiC. У меня совсем небольшой опыт встраивания нестандартных шрифтов, но пока не встречалось такого, чтобы это поведение не наблюдалось.

[Назар Мокринский]

Поискал в интернете — нашел это
Статья свежая, поэтому должна быть достаточно актуальной.
В разделе Current Implementations написано, что есть два как-бы способа для рендеринга шрифтов. Как вывод — могу сказать, что в зависимости от типа подключаемого шрифта и способ рендеринга меняется. Только вот логики в этом мало.

[Степан Зубашев]

Похоже, что вы правы. В тестовой HTML-ке сгенерированной сервисом, я поменял местами woff и otf в CSS — рендерится стало одинаково. Сменил наживую, получил (chrome):

— стало
— было

Итоговый SCSS:

@mixin font_inline( $name, $filename )
{
	@font-face {
		font-family: $name;
		src: url('../fonts/#{$filename}.eot?##{$name}') format('eof');
	}
	@font-face {
		font-family: $name;
		src: local('☺'),
			inline-font-files('#{$filename}.ttf', truetype ),
			inline-font-files('#{$filename}.otf', opentype ),
			url('../fonts/#{$filename}.woff?#reforma') format('woff');
		font-weight: normal;
		font-style: normal;
	}
}

[Назар Мокринский]

Интересный вывод, неплохо бы его добавить в тело вопроса, вдруг кто-то ещё с таким столкнется.

[Степан Зубашев]

Для начало нужно было провести тесты со всем зоопарком браузеров. Конфетки не получилось, IE9 в любом случае показывает шрифты «жирновато», впрочем, я полагаю, евангелисты MS готовы потерпеть и не такое :)

[marcus]

Жирновато рендерят ИЕ9 и Сафари под Мак и поступают абсолютно правильно, в отличие от других браузеров.

[Назар Мокринский]

Кому как нравится, мне лично по вкусу рендеринг Opera под Ubuntu — наоборот буквы получаются более аккуратными.