Приветствую!
А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.
И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?
Спасибо!
Так ну начну по порядку:
Права на шрифт. - Шрифты это одна из головных болей веб-мастер т.к. некоторые шрифты имеют ограниченный ореол обитания сайтов, на которых они могут быть, это может быть шрифт разработанный конкретно под сайт или купленный у дизайнерского агенства. И перед использованием шрифта стоит убедится имеет он ограниченное распространение или в свободном доступе. Будет печально сверстать сайт под определенный шрифт и добиться лаконичной страницы, а потом, получить письмо о нарушении АП.
Можно поискать бесплатные шрифты
Для просмотра ссылки Войди или Зарегистрируйся и
Для просмотра ссылки Войди или Зарегистрируйся.
Определить шрифт. - Определить шрифт можно через CSS сайта, для этого следует:
- На странице открыть её код ( Сочетание Ctrl + U во всех браузерах )
- Найти главный файл стилей ( В коде выглядит примерно так: <link type="text/css" rel="stylesheet" href="Ссылка_на_CSS_файл_формата.css"/> )
- Перейдя в CSS посмотреть какие шрифты зарегестрированы ( @font-face { текст с ссылками на файлы шрифта. } )
- Стянуть с сайт нужный шрифт.
Кросбраузерность шрифта. - Я из бородатого поколения, когда следовало поддерживать ИЕ6, да и в принципе учитывая истеричность ослика, рекомендую в CSS подключать шрифт в 2х форматах .eot и .ttf, случается так, что шрифт подключен правильно, но он не отображается в каких либо браузерах, и как показала "съеденная собака", некоторые форматы шрифтов браузеры не поддерживают.
Сейчас сталкивался с тем. что пихают на сайты форматы: woff2, woff, svg. На счет крайнего скажу да это действительно круто использовать шрифты SVG да и вообще все. чо с ним связано, но для визитки достаточно тех форматов, что привел выше.
У меня к примеру регистрация шрифта выглядит так:
[CSS]@font-face { font-family: 'gothic'; src: url('css/gothic.eot#') format('eot'), url('css/gothic.ttf') format('truetype'); font-weight: normal; font-style: normal;}[/CSS]
И далее я использую вызов зарегистрированного шрифта:
body { font-family: 'gothic';}
Локализация шрифта. - Бывало такое, находите на буржуйском сайте клевый макет, вытаскиваете из него шрифт.. а он на русском обычный Times new roman \ Calibri, так вот, к чему это я, есть урезанные шрифты, то есть если погуглить по названию, можно найти полную версию с кириллическими буквами. Если совсем шрифт не имеет русскоязычных аналогов следует поискать альтернативный шрифт.
Лично я проверяю написав русский и английский алфавит, устанавливаю шрифт и применяю его на написанное т.к. встречал, что некоторых букв нет и я долго воевал с кракозяброй в шрифте пока не понял, что это не ошибка кодировки, а ошибка в шрифте.
Советы по читабельности. - Ряд рекомендаций, которые следует применять при создании страницы сайта:
- Длина строки должна варьироваться в предела 80 символов. ( Человек ленивое существо и если интуитивно видит много букв в строчку, он не будет читать, даже если там ценная информация. )
- Белый фон, серые буквы - до сих пор остается идеальным сочетанием, пригодным для чтения. И как бы я не любил создавать темный дизайн, белый шрифт на черном фоне читается менее охотно. ( Серые буквы - имеется в виду чисто черный он давит, но стоит от идеально черного #000000 отойти в серую сторону и шрифт с цветом #1E1E1E будет приятно читаться. )
- Два основных размера - избегайте радугу размеров шрифта, на сайте должно быть два основных размера, большой который используется для заголовков и обычный читабельный.
- Группа стандартов шрифта - что бы не вдаваться во все нюансы разделю шрифты на художественные ( которые красивые но сложночитаемые ) и технические ( легко читаемые но более простые ). Для сайта следует использовать технические.
- Междустрочный интервал - следует устанавливать свой интерлиньяж, я обычно ставлю чуть больше чем стандартный, и текст сразу получает объем. ( line-height: 1.1; )
- Красная строка - каждый абзац должен иметь небольшую красную строку, текст воспринимается совсем по другому. ( p { text-indent: 20px; } )
- Грамматика - отслеживайте грамматические и синтаксические ошибки в тексте