css: подключение шрифтов, буквица с контуром и тенью

Сообщение **c61** » 07.01.14 12:54

Недавно пользователи попросили "облагородить" одну мою конференцию с использованием стилизованного под старославянский шрифта. В наличии был только truetype.

Для преобразования шрифтов ttf в другие форматы можно воспользоваться этим сервисом.

Подключение шрифта:

Код: Выделить всё

@font-face {
	font-family: CyrillicOld;
	src: url("/forum/fonts/cyrillic_old.eot"); /* for IE */
}
@font-face {
	font-family: CyrillicOld;
	src: local("CyrillicOld"), url("/forum/fonts/cyrillic_old.eot?#iefix") format("embedded-opentype"), url("/forum/fonts/cyrillic_old.ttf") format("truetype"), url("/forum/fonts/cyrillic_old.svg") format("svg"), url("/forum/fonts/cyrillic_old.woff") format("woff");
}

Для буквицы можно использовать следующее (модификация стиля Artodia Helion):

Код: Выделить всё

.phpbb .topiclist dt a.forumtitle:first-letter,a.topictitle:first-letter {
	font-family: CyrillicOld, Verdana, 'Open Sans', sans-serif;
	font-size: 1.6em;
	margin: 0 2px 0 0;
	text-transform: uppercase;
	color: gold;
	text-shadow: #003D00 1px 1px 0, #003D00 -1px -1px 0, #003D00 -1px 1px 0, #003D00 1px -1px 0, #003D00 1px 0 0, #003D00 0 1px 0, #003D00 -1px 0 0, #003D00 0 -1px 0, #003D00 2px 2px 2px;
	float: left;
}

В результате легко получить примерно такое:

Работает в IE10+ и во всех современных браузерах.