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

Хаки, скрипты, BB-коды и другие вещи, не оформленные в виде полноценных модов, но способствующие улучшению функциональности движка.
Аватара пользователя
c61
Разработчик модов
Сообщения: 249
Зарегистрирован: 24.08.13 16:46
Благодарил (а): 20 раз
Поблагодарили: 62 раза

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

Сообщение c61 »

Недавно пользователи попросили "облагородить" одну мою конференцию с использованием стилизованного под старославянский шрифта. В наличии был только 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;
}
В результате легко получить примерно такое:
bukv.jpg
Работает в IE10+ и во всех современных браузерах.
Ответить