Xiper

Вставка стрелок

Автор: Егор Скорняков Дата публикации:

Встречаются задачи, когда необходимо вставить на сайт стрелки. Наглядный пример — страничная навигация на Яндекс

стрелки у Яндекс

Есть 2 варианта решения данной задачи:

Первый вариант тут рассматривать не будем по двум причинам:

  1. все очевидно — вырезали картинки, присвоили в фон элементу с помощью background (и даже не думай вставлять стрелки с помощью тега img, стрелка — это элемент оформления)
  2. картинки — это дополнительный вес сайта + дополнительные обращения к серверу, потому, где это возможно, старайся избегать их использование

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

пример красивой и нет стрелок

Решение

Перебором шрифтов находишь такой, который красиво отобразит стрелку и присваиваешь данному символу этот шрифт. Например, имеем такую структуру кода (возьмём только кнопку "вперёд"):

<span class="navigation"><a href="#">вперёд</a><i><b>Ctrl</b>→</i></span>

CSS код:

.navigation {
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation i {
font-family:Times, sans-serif;
}
.navigation i b {
font-family:Arial, Helvetica, sans-serif;
font-weight: normal;
}

В данном примере для навигации используется шрифт Arial, а для стрелки Times.

Update by Vladimir: с кривизной стрелок можно бороться так же увеличением шрифта. При это имя шрифта менять не нужно. Правда для некоторых шрифтов размер шрифта для стрелки должен быть намного больше (для кроссбраузерного отображения), чем размер текста из-за чего стрелка выглядит гипертрофированной.

По теме