|
Поделиться

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

Хаки, скрипты, BB-коды и другие вещи, не оформленные в виде полноценных модов, но способствующие улучшению функциональности движка.

Сообщение 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;
}
В результате легко получить примерно такое:
bukv.jpg


Работает в IE10+ и во всех современных браузерах.
Аватара пользователя
c61
Разработчик модов
 
Сообщения: 249
Зарегистрирован: 24.08.13 16:46

Вернуться в Расширение возможностей phpBB 3.0.x

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron