Там было возрастает и искренние интерес к typography в Интернете за последние несколько лет.Большинство веб-сайтов полагаются на текст, чтобы передать свои сообщения, так it’ ы не удивительно, что текст рассматривается с особой тщательностью.В этой статье we’ будем смотреть на некоторые полезные приемы и умный эффекты, которые используют силу стилей и некоторых особенностях предстоящего текста CSS Level 3 спецификации, которые должны дать веб-дизайнерам более тонкий контроль над text.

Имейте в виду, что эти новые свойства и методы являются либо new или еще в работе, и некоторые из самых популярных браузеров еще не поддерживают их.Но мы чувствуем, it’ важно, что вы, как обоснованные и любопытных веб-дизайнера, знаю what’ с углом и иметь возможность экспериментировать в projects.

Взгляд на Basics

Один из наиболее распространенных CSS связанных ошибок, сделанных начинающих веб-дизайнеров создают негибкие стилей, которые имеют слишком много классов и IDs и которые трудно maintain.

Допустим, вы хотите изменить цвет заголовков в сообщениях, сохраняя другие товарные позиции Вашего сайта в цвета по умолчанию.Вместо того, чтобы добавить класс big-red для каждого заголовка, разумным подходом было бы воспользоваться DIV класс, который описывает свои сообщения (вероятно, post) и создать селектор, который нацелен на заголовок вы хотите изменить, как итак:

.post h2 {
	font-weight: bold;
	color: red;
}

Это просто быстрый напоминание, что нет необходимости добавлять классы, все, что вы хотите стиль CSS, особенно текст. Подумайте simple.

Шрифт Property

Вместо указания каждое свойство в отдельности, вы можете сделать это все за один раз, используя свойство шрифта стенографии.Порядок свойства должны быть следующие:. font-style font-variant font-weight font-size line-height font-family

При использовании шрифта стенографии, любые значения не указан будут заменены на их родителей value.Например, если вы определяете только 12px Helvetica, Arial, sans-serif, то значения font-style font-variant и font-weight будет установлен в качестве normal.

Шрифт собственности также может быть использован для указать системе fonts: caption icon menu message-box small-caption status-bar.Эти значения будут основаны на системе в использовании, и так будет варьироваться в зависимости от пользователя preferences.

Другие шрифта Properties

Нескольких связанных со шрифтом свойства и значения, не так широко используется.Например, вместо text-transform, чтобы превратить ваш текст в заглавными буквами, вы можете использовать font-variant: small-caps для более изящного effect.

Вы также можете быть очень конкретным о вес вашего fonts, вместо того чтобы использовать общие regular и bold свойства.CSS позволяет указать шрифт веса со значениями от 100 до 900 (т.е. 100 200 300 и т.д.).Если вы решите использоватьэто, знаете, что 400 значение представляет normal вес, в то время 700 представляет bold.Если шрифт не дано веса, то по умолчанию его родителя weight.

Еще одно полезное свойство, к сожалению, поддерживается только в Firefox на данный момент, составляет font-size-adjust, которая позволяет определить пропорции, когда запасной шрифт называется.Таким образом, если заменить шрифт меньше, чем предпочтительным, text’ ы х высота будет сохранено.Хорошее объяснение того, как font-size-adjust работ можно найти на W3C website.

Работа с пробелами, разрывы строк и текст Wrapping

Несколько свойств CSS сделки с этими вопросами, но функции все еще находятся в работе (на “ Рабочие Draft” этап).

Белый Space

white-space свойство позволяет задать комбинацию свойств, для которых он служит сокращение: white-space-collapsing и text-wrap.Here’ SA расстройство того, что каждое свойство расшифровывается как:

• normalпробелами рушится: развал / текст намотка: normal
• preпробелами рушится: сохранение / перенос текста: none
• nowrapпробелами рушится: развал / текст намотка: none
• pre-wrapпробелами рушится: сохранение / перенос текста: normal
• pre-lineпробелами рушится: preserve-breaks/text-wrap: normal

Это свойство может быть полезно, если вы хотите, например, Показать фрагменты code на ваш сайт и сохранить строки и пробелы.Установка контейнеров до white-space: pre сохранят formatting.

WordPress использует white-space: nowrap на приборной панели, так что цифр, указывающих сообщения и комментарии don’ T оболочку, если ячейка таблицы слишком small.

Word Wrap

Одно свойство, которое уже хорошо использовали составляет word-wrap.Он поддерживает одно из двух значений: normal и break-word.Если вы установите word-wrap до break-word и слово так долго, что это было бы переполнение контейнера, она разбивается в случайной точке так, чтобы она переносится в пределах container.

Conservation International гориллы Программа сайт использует word-wrap его commenters’ names.

В теории, word-wrap: break-word должен быть разрешен только при text-wrap устанавливается либо в normal или suppress (который подавляет разрыва строки).Но на практике, и на данный момент, он работает даже тогда, когда text-wrap установлен на что-то else.

Имейте в виду, что в соответствии со спецификацией, break-strict значение word-break имущество находится в опасности быть dropped.

Слова и буквы Spacing

Два других свойств, которые являютсячасто используются word-spacing и letter-spacing.Вы можете использовать их для control— Вы догадались it— расстояние между словами и буквами, соответственно.Оба свойства поддерживает три различных значения, которые представляют собой оптимальные, минимальные и максимальные spacing.

Показать & Расскажи использования letter-spacing на своем навигации links.

Для word-spacing, устанавливая только одно значение соответствует оптимальным расстоянием (и двух других установлены на normal).При установке два значения, первое из которых соответствует оптимальному и минимальное расстояние, а второй по максимуму.Наконец, если вы установите все три значения, они соответствуют всем трем упомянутым выше.При отсутствии обоснования, оптимальный интервал used.

Он работает немного отличается для letter-spacing.Одно значение только соответствует всем трем значениям.Остальные работают, как они делают в течение word-spacing.

Характеристики содержать несколько запросы на дополнительную информацию и examples о том, как пробела processing будет работать и как она может быть использована и быть полезными для таких языков, как японский, китайский, тайский, корейский, и т.д.Таким образом, если you’ D, как помочь, то почему бы не дать ему прочитать (it’ ы не that длинные)?, и посмотреть, как вы можете способствовать

Отступы и висячие Punctuation

Отступы текста и висячей пунктуации две типографские функции, которые часто forgotten в Интернете.Вероятно, это связано с одним из трех факторов:

1. Настройка них не так проста, как это может быть,
2. Там было сознательное решение не применять их;
3. Дизайнеры просто не знают о них или don’ знаю, как правильно использовать them.

Суши & Роботы веб-сайт висячей пунктуации на маркированный lists.

Отметить Болтон имеет хорошую краткое объяснение висячей пунктуации в своей “ Пять простых шагов к лучшему Typography ” серии, и Ричард Rutter упоминает отступ на своем сайте, Элементы Типографский стиль, примененный к Web.Это две очень хорошие читает для любого веб-designer.

Таким образом, theory является то, что вы должны применять небольшое углубление, чтобы каждый текст пункта после первого.Вы можете легко сделать это с соседними брат комбинатора:

p + p {
	text-indent: 1em;
}

Этот селектор цели каждого пункта (т.е. p), который следует за другим пунктом, поэтому первым пунктомНе targeted.

Еще один типографский правило заключается в том, что маркированные списки и quotes должно быть Это связано с тем, что поток текста не нарушена эти визуальные distractions.

Уровень CSS Текст 3 спецификации имеет (неполный) ссылка на предстоящих висячей пунктуации property.

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

blockquote {
	text-indent: -0.2em;
}

Для маркированные списки, просто убедитесь, что положение пули установлена ​​на outside, и, что контейнер div не настроен на overflow: hidden, в противном случае, пули не будет visible.

Веб-шрифтов и Decoration

Шрифт face

Много разговоров было сделано на веб-о font-face и является ли это хорошей thing— особенно после появления Typekit (и все еще в частно-бета Fontdeck).Спор идет главным образом о том, сколько визуальный беспорядок это может привести к веб-дизайна.Некоторые люди (аргумент идет) aren’ T достаточно шрифта здравого смысла, чтобы быть в состоянии осуществить проектирование, в котором они могут свободно использовать любой шрифт в основном они того пожелают.Разве не наши чувствительные глаза дизайнером быть безопаснее, если только проверенные, утвержденные Web-безопасных шрифтов были использованы

С какой бы стороны аргумента вы падаете, правда заключается в том, что примеры сайтов, которые используют font-face красиво являются numerous.

Недавно обновленный веб-сайт Jonathan Snook использует font-face property.

font-face собственность довольно просто понять и использовать.Загрузите шрифт, который вы хотите использовать на своем сайте (убедитесь, что лицензия позволяет это), � …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров