CSS Шрифт

Tue, 26 Aug 2014 00:19:32 +0400

Большинство веб-сервисов для подготовки кастомных шрифтов к вёрстке конвертируют шрифт в 4-5 разных форматов, при том что конвертировать имеет смысл только в один формат, в woff. Woff лёгок, и поддерживается всеми современными браузерами. При этом woff имеет смысл кодировать в base64 и вставить непосредственно в css файл с помощью data:uri.

Об этом ещё в 2012 году писал Артём Поликарпов. С тех пор, как я прочитал совет Артёма, я подготавливал все шрифты вручную, т. е. конвертировал файл сначала в woff, затем кодировал в base64, затем создавал css-файл и вставлял в него всё полученное. И мечтал о сервисе, который делал бы за меня всё это автоматически. Но, к сожалению, так и не нашёл такого, и поэтому сделал сам. Собственно вот:

Открыть в новой вкладке

Плюсы шрифта в css:

нужно подключить всего один файл;
меньше запросов к серверу;
текст не прыгает при загрузке шрифта.

Минусы:

не поддерживается ИЕ ниже 9-го.

От поддержки 8-го ИЕ я отказался (рекомендую и вам), по нескольким причинам:

шрифт в формате eot (специальный формат для ИЕ), у меня не работал практически никогда, и как сделать, чтоб заработал, я понятия не имел;
человеку с ИЕ 8 будет не до вашего кастомного шрифта, из-за которого этот браузер начнёт ещё больше тормозить, да ещё и сайт из-за него грузится дольше будет, поэтому имеет смысл подобрать стандартный шрифт.

Ссылки по теме:
Ещё один способ устранить ВОШ

Как сверстать стрелку без картинок

Sun, 16 Sep 2012 23:37:27 +0400

Прочитав эту заметку, вы узнайте как сверстать вот такую симпатичную стрелочку:

«Рисуем» треугольники

Возьмём обычный бокс с бордером, для наглядности раскрасив стороны в разные цвета:

.box{
	border-style: solid;
	border-top-color: blue;
	border-right-color: green;
	border-bottom-color: yellow;
	border-left-color: red;
}

<div class="box" style="width: 200px; height: 200px; border-width: 2px"></div>

А теперь увеличим размер бордеров, одновременно уменьшив бокс:

<div class="box" style="width: 100px; height: 100px; border-width: 52px"></div>

Убёрем высоту и ширину совсем:

Треугольники готовы.

«Рисуем» стрелку

Заготовка:

.arrow{
	position: relative;
	background: #09F;
	display: inline-block;
	width: 200px;
	padding: 5px;
	color: #FFF;
}

<div class="arrow">&nbsp;</div>

Добавим знакомые нам треугольники, с помощью псевдоэлемента :after, раскрасив все в один цвет, и сделав прозрачным левый бордер:

.arrow:after{
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	right: 0;
	border: 100px solid red;
	border-left-color: transparent;
	z-index: 10;
	content: "";
}

Хитрым образом спозиционируем псевдоэлемент:

/* добавляем */
.arrow:after{
	top: 50%;
	right: -100px;
	margin-top: -100px;
}

Скроем выступы и покрасим бордеры в цвет фона:

/* добавляем */
.arrow{
	overflow: hidden;
}

.arrow:after{
	border-color: #FFF;
	border-left-color: transparent;
}

Стрелка готова, для крутости можно добавить градиент:

У метода есть 2 недостатка:

фон должен быть однородным,
по-настоящему многострочную стрелку сделать не получиться, потому-что

но вполне возможно подобрать значение правого паддинга для 2-3 строк

Техноблог, заметки с тегом: вёрстка

CSS Шрифт

Как сверстать стрелку без картинок

«Рисуем» треугольники

«Рисуем» стрелку