Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

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

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

CSS-стили для шрифтов и текста

Главная « Уроки Web-мастерства « CSS-стили для шрифтов и текста

версия для печати

Шрифтовое оформление в Web …

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

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

Если, прочитав название статьи, вы задали себе вопрос: «А разве шрифт и текст не одно и то же?», отвечаю - нет.

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

Все шрифты относятся к определенным наборам, описывающим их внешний вид: с засечками, без засечек и моноширинный. Наборы шрифтов состоят из семейств, например, Times или Helvetica.

B свою очередь, семейство шрифтов можно разделить на различные гарнитуры, являющиеся вариациями базового семейства, например, Times Roman, Times Bold, Helvetica Condensed, Bodoni Italic и т.д.

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

В CSS есть как свойства, относящиеся к шрифту, так и свойства, относящиеся к тексту. Свойства шрифта связаны с размером и внешним видом набора шрифтов. Они описывают, например, используемое семейство, размер, выделение курсивом или жирным.

Свойства текста относятся к способу обращения с шрифтом - они задают высоту строки и расстояние между буквами, подчеркивание и т.д.

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

 

Проблемы со шрифтами …

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

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

К счастью, CSS позволяет указать список альтернативных шрифтов на случай, если первый вариант не найден.

Данную проблему осложняет тот факт, что шрифты по-разному называются на разных платформах и зависят от своего изготовителя.

Так что, если даже вы захотите, чтобы текст отображался простым шрифтом Times, могут использоваться гарнитуры Times New Roman, или TimesNR, или Times Roman. Браузеры не различают их.

Так что бывает сложно найти нужную гарнитуру, даже если она есть.

 

Проблемы размера шрифта …

Еще одна проблема шрифтового оформления в Web - это размер шрифта. Проблемы возникают из-за разницы в разрешении экрана и из-за того, что в разных браузерах и операционных системах по умолчанию принимаются разные размеры шрифта.

То, что прекрасно выглядит на мониторе, может быть слишком мало, чтобы это можно было прочитать на каком-то другом устройстве. Кроме того, для обеспечения доступности размер текста должен определяться так, чтобы пользователь мог его изменять (обычно, увеличивать), чтобы он соответствовал специфическим нуждам.

Конкретные проблемы, связанные с определением размера текста, а также рекомендации рассмотрены в разделе «Размер (кегль) шрифта: font-size». Как вы можете видеть здесь все гораздо сложнее, чем в печатном деле. Требуется знания среды и иногда нужно принимать непростые решения.

 

Альтернативы тексту браузера …

Хотя CSS предоставляет гораздо больший контроль над форматированием текста, чем любые стилевые ухищрения в HTML, нужно помнить, что CSS работает в среде, которая достаточно чужеродна или, в самом лучшем случае, плохо учитывает вопросы шрифтового оформления.

С самых ранних дней существования Web предпринимались попытки преодолеть ограничения и получить хорошее оформление Web-страниц. После более чем 10-ти лет проб по-прежнему не существует идеального решения, однако есть несколько вариантов, которые можно принять во внимание.

 

Текст в графике …

Очень скоро дизайнеры начали заменять ужасный текст браузера текстом, представляющим собой встроенную графику. Какое-то время были нередкими сайты, где каждое из немногих оставшихся слов «содержания» тонуло в море графики.

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

Альтернативный текст (с использованием атрибута alt) хоть и помогает, но не решает проблемы.

 

Методы замены изображением …

В современном Web-дизайне, основанном на CSS, есть способ замены текста изображением с сохранением текста исходного документа.

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

Различные методы замены текста изображением я уже подробно рассматривал в статье: CSS-методы замены текста изображениями.

 

Текст sIFR …

Одним из самых интересных развивающихся решений в области шрифтового оформления в Web является sIFR - аббревиатура от Scalable Inman Flash Replacement.

Это решение основывается на методах замены изображений, которые стали популярными в CSS-дизайне и в которых вместо изображений GIF, JPEG или PNG использовались небольшие Flash-ролики.

Преимущество здесь в том, что текст во Flash-роликах имеет векторную основу, так что он гладкий, в нем устранены помехи, связанные с дискретизацией, и его можно масштабировать на странице.

Используя комбинацию CSS, JavaScript и технологии Flash, sIFR позволяет авторам «Вставлять яркое шрифтовое оформление в Web-страницы, без ущерба для доступности, удобства работы поисковых систем или семантики структурной разметки».

sIFR был создан Майком Дэвидсоном (Mike Davidson), который использовал оригинальную концепцию, разработанную Итоном Инманом (Shaun Inman) (буква I в аббревиатуре sIFR). Вот как работает данный процесс (объяснения взяты с официального сайта sIFR, статья называется: sIFR 2.0: Rich Accessible Typography for the Masses):

  1. В браузер загружается обычная HTML-страница.

  2. Запускается функция JavaScript, которая сначала проверяет, установлен ли Flash, а затем ищет указанные вами теги, ID и классы.

  3. Если Flash не установлен (или если JavaScript отключен), то HTML-страница отображается обычным способом и больше ничего не происходит. Если Flash установлен, то код JavaScript просматривает исходный текст документа, определяя все элементы, которые вам нужно «оснастить» возможностями sIFR.

  4. Далее скрипт создает Flash-ролики, имеющие тот же размер, что и исходные элементы, и накладывает их сверху, загружая исходный текст браузера во Flash-переменную.

  5. Код ActionScript, находящийся в каждом Flash-файле, затем рисует текст выбранной вами гарнитуры и размером 6 пунктов и масштабирует его до тех пор, пока он не займет все место в ролике Flash.

В оптимальных для браузера условиях все это происходит за долю секунды, так что вся эта проверка, замена и масштабирование для пользователя незаметны. Некоторые браузеры используют sIFR с трудом. Технология sIFR несовершенна, но она весьма многообещающа, и может привести к более мощным решениям.

Есть также интересный с исторической точки зрения документ, в котором описана история шрифтового оформления в Web и в первой версии sIFR, который можно найти на сайте в статье: Introducing sIFR: The Healthy Alternative to Browser Text.

 

Встроенные шрифты …

В середине 90-х компании Microsoft и Bitstream (партнер Netscape) предприняли совместные усилия по разработке технологии встроенных шрифтов. При использовании встроенных шрифтов с HTML-документом при помощи элемента link связывается отдельный файл, содержащий информацию о необходимых наборах символов.

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

Embedded Open Type от Microsoft работает только в Internet Explorer для Windows. Компания Bitstream (разрабатывающая шрифты) создала шрифты TrueDoc Dynamic, которые изначально поддерживались Netscape 4, но затем от них отказались в Netscape 6, основанном на Gecko.

Компания Bitstream отказалась от технологии TrueDoc в Web из-за отсутствия ее поддержки браузерами. В настоящее время технология встроенных шрифтов по большей части не используется.

 
Урок № 14: | Дата: 05.03.2008 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Проблемы со шрифтами…

Проблемы размера шрифта…

Альтернативы тексту браузера…

Текст в графике…

Методы замены изображением…

Текст sIFR…

Встроенные шрифты…

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Создаем CSS-меню

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-методы центрирования web-страницы

CSS-эффекты наведения указателя мыши

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov