Рубрика: Сокровища

Использование относительных значений шрифтов

В работе над версткой сайта мы используем только относительные размеры шрифтов. Если сделать размер шрифта абсолютным, тогда браузер не сможет масштабировать текст, грубо говоря, пользователь не сможет менять размер шрифта. Это может быть полезно для людей с ограниченными возможностями и тем, кто просто любит, чтобы буквы были побольше.
К относительным величинам относятся — em (вычисляемая единица), % (процент) и pt (пункты). pt применяется с оговоркой, что это значение для типографии, я рекомендую указывать его только для тех элементов, которые планируется выводить на печать.
Если вы используете em, вам нужно считать размера шрифта браузера, начиная с 16px, т.е. по умолчанию 1em=16px. Обычно базовый размер шрифта сбрасывают до 10px, через css, вот таким образом:

body { font-size: 62.5%; }

В дальнейшем, все элементы верстки наследуют это значение.
Ниже размещаем таблицу-шпаргалку, помогающую быстро вычислить значение шрифта, но следует помнить, что многое зависит так же от самого шрифта, браузера и операционной системы.

Пункты Пиксели EMs Проценты
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

QR-коды и их применение на практике

Специальный двухмерный код применяется в Японии и странах Азии уже достаточно давно и очень успешно. Сканеры встроены практически во все мобильные телефоны, а если их нет, достаточно просто сфотографировать код и получить нужную информацию. До России эта мода только начинает доходить, но возможности QR-кодов можно использовать уже сейчас.

Как же применить QR-код на практике? Можно например зашифровать адрес сайта и напечатать код в газете, человеку достаточно просто сфотографировать код и он сразу попадает на сайт. Не нужно ничего набирать руками и запоминать, просто сфотографировал и ты уже на сайте. Некоторые применяют эти коды в туризме или играх.
На самом деле возможно зашифровать любую текстовую информацию, не только адрес сайта. Например почтовый адрес, контактную информацию, географическое положение или любой другой произвольный текст. Не ограничивайте себя в фантазии, возможностей применения очень много.

Создать QR-код и зашифровать нужную информацию очень просто, есть специальные сервисы, которые позволяют это делать быстро и легко:

www.qr-code.com.ua — Самый мощный QR-генератор с возможностью выбора размера картинки.
www.kolyadin.ru/qr_code — Генератор от Алексея Калядина.
qr.ee — Неплохой генератор.

Расшифровка QR-кодов — Может расшифровать ваш или чужой код.

Дополнительная информация в Википедии

Что такое хостинг и домен

Два этих страшных слова слышат все люди, решившие заказать сайт и обычно мало кто может, по простому, объяснить, что же это такое. Давайте вместе разберемся.

Хостинг — это место в интернете, где располагаются файлы вашего сайта. Приведу пример из жизни, некая фирма, арендует помещения под офис, отдавая ежемесячно плату арендатору. Тоже самое и с сайтом, только здесь вы арендуете пространство на компьютерах арендатора.
Обычно хостинг оплачивается сразу на год, но можно оплачивать и по месяцам. Цены на хостинг сейчас очень разные и формируются в зависимости от требований вашего сайта. Если вы делали сайт у нас, то мы порекомендуем самый лучший хостинг из возможных, а так же можем взять на себя все заботы по поддержанию работоспособности сайта и продлению оплаты хостинга.

Домен — это набор букв или символов, который нужно набрать, чтобы попасть на ваш сайт. По сути, это адрес вашего сайта, среди множества других. Например, домен, для моего сайта — www.sajt.ru
Можно зарегистрировать любой домен, если он еще не занят другим человеком. Оплачивать домен, так же как и хостинг, нужно раз в год. Если вы заказывали сайт, то мы зарегистрируем для вас домен совершенно бесплатно!

Новый знак рубля

Новый знак рубля, неофициально принят уже давно, многие сайты, интернет магазины и дизайн студии по собственной инициативе перешли на новый знак. На нашем сайте цены тоже отображаются с новым знаком. Если вы решили установить этот знак к себе на сайт, то это довольно просто, достаточно следовать инструкции и все получится. Итак, начинаем:

1. Скачайте и установите на ваш сайт специальный шрифт ruble.eot.

2. Для начала, прописываем CSS стили:
@font-face { font-family: "Rubl Sign"; src: url(http://www.sajt.ru/ruble.eot); }
span.cost { font-family: "Rubl Sign"; }
span.cost span.rur { text-transform: uppercase; // text-transform: none;}
span.cost span.rur span.eot { display: none; // display: inline;}
span.cost span.rur span.ttf, span.cost span.end { // display: none; }
span.cost span.end { position: absolute; overflow: hidden; width: .45em; height: 1em; margin: .1ex 0 0 -.55em; // display: none; }
span.cost span.end:before { content: '2013'; }

В первой строке, необходимо указать адрес, по которому у вас лежит шрифт.

3. Теперь прописываем код в тело HTML страницы:
<p style="font-size:1em">Французские булки по 100 <span class="cost"><span class="rur"><span class="eot">A</span><span class="ttf">р</span></span><span class="end">уб.</span></span></p>
<p style="font-size:1.2em">Французские булки по 100 <span class="cost"><span class="rur"><span class="eot">A</span><span class="ttf">р</span></span><span class="end">уб.</span></span></p>
<p style="font-size:1.5em">Французские булки по 100 <span class="cost"><span class="rur"><span class="eot">A</span><span class="ttf">р</span></span><span class="end">уб.</span></span></p>
<p style="font-size:2em">Французские булки по 100 <span class="cost"><span class="rur"><span class="eot">A</span><span class="ttf">р</span></span><span class="end">уб.</span></span></p>

Можно играть со значениями, как угодно.

Результат:

Соответсвие символов (только для Internet Explorer):

Этот способ гарантирует правильное отображение во всех браузерах и в любых условиях.

Безопасные шрифты для браузеров

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

Значение @font-family Windows Mac Семейство
Arial, Helvetica, sans-serif Arial Arial, Helvetica sans-serif
"Arial Black", Gadget, sans-serif Arial Black Arial Black, Gadget sans-serif
"Comic Sans MS", cursive Comic Sans MS Comic Sans MS5 cursive
"Courier New", Courier, monospace Courier New Courier New, Courier6 monospace
Georgia, serif Georgia1 Georgia serif
Impact,Charcoal, sans-serif Impact Impact5, Charcoal6 sans-serif
"Lucida Console", Monaco, monospace Lucida Console Monaco5 monospace
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode Lucida Grande sans-serif
"Palatino Linotype", "Book Antiqua", Palatino, serif Palatino Linotype, Book Antiqua3 Palatino6 serif
Tahoma, Geneva, sans-serif Tahoma Geneva sans-serif
"Times New Roman", Times, serif Times New Roman Times serif
"Trebuchet MS", Helvetica, sans-serif Trebuchet MS1 Helvetica sans-serif
Verdana, Geneva, sans-serif Verdana Verdana, Geneva sans-serif
Symbol Symbol2 Symbol2 —
Webdings Webdings2 Webdings2 —
Wingdings, "Zapf Dingbats" Wingdings2 Zapf Dingbats2 —
"MS Sans Serif", Geneva, sans-serif MS Sans Serif4 Geneva sans-serif
"MS Serif", "New York", serif MS Serif4 New York6 serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE, поэтому они установлены на многих компьютерах с ОС Windows 98.

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

6 Эти шрифты установливаются в Mac только при Classic-инсталляции

Отступ в Internet Explorer, под тегом <hr />

В браузере Internet Explorer, CSS-свойство margin для тега <hr />, отличается от других браузеров. По умолчанию, IE делает отступ на 7 пикселей больше, чем остальные браузеры. Для примера, возьмем следующий код:

<div>
<hr />
Расстояние между текстом и линией 3px
</div>

CSS для нашего кода:

hr {
margin: 3px 0;
height: 1px;
border: none;
background: #cf610f;
color: #cf610f; /* цвет линии в IE */
}

В браузерах Opera, FireFox, Safari и Chrome, мы видим, что текст, расположился ровно под линией, с отступом 3 пиксела, как мы и хотели:

В Internet Explorer получился отступ в 3+7 пикселов:

Такая ситуация нас не устраивает, потому мы зададим дополнительное правило в CSS, которое будет работать только для IE:

* html hr {margin: 0; /* для IE6 */}
*+html hr {margin: 0; /* для IE7 */}

Это правило, убирает лишний отступ в 7 пикселов, так же оно работает, если указать отрицательное значение. Надеюсь, этот небольшой, но полезный хак, поможет вам в работе.

Ajax генератор индикаторов загрузки

Частенько сталкиваюсь с тем, что нужно сделать индикатор загрузки. Это довольно долгое дело, приходится редактировать анимацию, подбирать нужные цвета, чтобы они вписывались в дизайн, отлаживать, подгонять по скорости. Для такой задачи, написан специальный генератор индикаторов загрузки. Просто выбираем из меню, какой тип стрелочек, кружочков, квадратов или змеек нам нужен, пишем цвет, можно указать цвет фона или вообще обойтись без него. Нажимаем «Генерировать» и получаем готовую картинку. Весь процесс занимает пару секунд, экономия времени колоссальная. Недавно переделывали портфолио, под новую систему, как раз выдалась возможность воспользоваться этим сервисом, у меня то он давно в закладках, но вот, пригодился. Надеюсь, пригодится и вам.

На этом же сайте можно сгенерировать фавиконку. Я уже писал о похожем сервисе генерации фавиконок, здесь все то же самое, только без возможности редактирования. Есть генерация коротких, вебдванольных доменных имен, причем все синхронизируется с базой данных и выдаются только свободные домены. Жаль, что поиск ведется только по зоне .com

Страницы блога (3):[1]23