Как сделать капители css

Форматирование текста в CSS

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

В ходе верстки сайта Вам придется постоянно изменять внешний вид веб-страниц. Одной из первых задач при работе с текстом на странице является необходимость его выровнять.

Выравнивание текста

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

Чтобы установить выравнивание для текста, используйте следующие ключевые слова со свойством text-align:

Давайте рассмотрим пример работы с выравниванием текста:

В данном примере мы создали 4 (четыре) класса, которые определяют различные варианты выравнивания текста. Для всех элементов

Результат нашего примера:

Рис.60 Пример использования свойства text-align (выравнивание текста).

Отступ первой строки

Если Вы откроете практически любую книгу, содержащую текстовую информацию, то можете заметить, что первая строка каждого абзаца, как правило, имеет отступ (красная строка).

Если у вас есть необходимость придать вашему документу вид подобный печатному изданию, то воспользуйтесь таким CSS свойством, как text-indent.

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

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

Давайте рассмотрим пример использования этого свойства:

В данном примере мы создали 4 (четыре) стиля и поочередно применили их к четырем абзацам. Для первого абзаца установили значение отступа по умолчанию (0), для второго задали отступ 40 пикселей, для третьего указали отрицательный отступ (-20px), в результате чего, абзац сдвинулся за окно браузера и для четвертого абзаца установили отступ равный 50%.

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

Результат нашего примера:

Рис. 61 Пример использование свойства text-indent (красная строка).

Установка междустрочного интервала

В CSS за междустрочный интервал (интерлиньяж) отвечает свойство line-height (высота строки). Чем выше значение этого свойства, тем больше промежуток между строками.

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

Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %.

Расчёт междустрочного интервала происходит следующим образом:

Например, размер шрифта составляет 20 пикселей, а высота строки 150% (30 пикселей). Таким образом, получается:

Допускается задавать размер высоты строки с использованием числового значения. Объявление выглядит следующим образом:

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

Например, шрифт для абзаца установлен 2em, а высота строки задана как 1.5:

Расчетное значение междустрочного интервала в нашем случае составит 3em:

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

В данном примере мы рассмотрели способы указания высоты строки в пикселях, процентах и с использованием множителя.

Результат нашего примера:

Рис. 62 Пример использование свойства line-height (установка междустрочного интервала).

Интервал между словами и символами

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

Чтобы установить определенный интервал между символами необходимо использовать CSS свойство letter-spacing. При работе со свойством используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между символами, а отрицательные уменьшают, вплоть до наслоения букв и символов друг на друга.

Давайте рассмотрим пример использования свойства letter-spacing:

В данном примере мы рассмотрели способы указания интервала между символами в тексте в пикселях (как положительное, так и отрицательное значение) и единицах измерения em.

Результат нашего примера:

Рис.63 Пример использования свойства letter-spacing (интервал между символами в тексте).

Давайте рассмотрим пример использования свойства word-spacing:

В данном примере мы рассмотрели способы указания интервала между словами в тексте в пикселях (отрицательное значение) и единицах измерения em.

Результат нашего примера:

Рис. 64 Пример использования свойства word-spacing (интервал между словами в тексте).

Декорирование текста

CSS свойство text-decoration дает нам возможность добавить к тексту такие виды декорирования как:

Однако, одно из самых распространенных применений этого свойства это отмена декорирования, при этом необходимо использовать со свойством text-decoration ключевое слово none :

В данном примере мы убрали декорирование (подчеркивание) у всех гиперссылок. Полный перечень ключевых слов свойства text-decoration указан в данной таблице:

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

Допускается использовать несколько значений в одном объявлении:

Давайте рассмотрим пример использования свойства text-decoration в тексте:

Результат нашего примера:

Рис. 65 Пример использования свойства text-decoration (декорирование текста в CSS).

Верхний и нижний регистр

CSS предоставляет возможность осуществить преобразование любого текста в верхний или нижний регистр, а также преобразовать первые буквы каждого слова в верхний регистр. Управляет регистром текста свойство text-transform, ниже в таблице приведены все его значения:

Давайте рассмотрим пример использования свойства text-transform в тексте:

В данном примере мы создали три различных стиля и применили их поочередно к каждому абзацу. В первом абзаце первые символы каждого слова были преобразованы в верхний регистр (значение capitalize ), во втором все символы в верхний регистр (значение uppercase ), а в третьем в нижний регистр (значение lowercase ).

Рис. 66 Пример использования свойства text-transform (изменения регистра текста).

Капитель в CSS

Малые заглавные, или капитель (англ. small caps) — начертание шрифта, в котором строчные знаки выглядят как уменьшенные заглавные буквы. Для создания такого начертания используется CSS свойство font-variant со следующим синтаксисом:

Рассмотрим пример использования:

Рис. 67 Пример использования свойства font-variant (капитель шрифта).

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Практическое задание № 16.

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

Источник

Шрифты и работа с ними

Помимо насыщенности, CSS позволяет управлять следующими настройками:

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

Семейство шрифтов

Если у пользователя в системе есть шрифт Georgia, то будет применён он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:

А какой шрифт именно выберет браузер? Тут всё зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:

При указании шрифтов также возможно указать и основное семейство шрифтов. Если ни один из указанных шрифтов не был найден, то браузер подберёт системный шрифт из того семейства, которое было указано. Дополним пример семейством шрифтов по умолчанию. В примере указаны шрифты из семейства антиква, поэтому стоит добавить соответствующее значение.

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

Установка новых шрифтов

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

Пусть наш проект имеет директорию fonts, внутри которой находятся файлы шрифтов.

Хорошим тоном является указание @font-face в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face :

После указания этих свойств уже можно пользоваться шрифтом. Подключим Roboto-Regular.

Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретёт следующий вид:

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

Стиль шрифта

Строчные символы

С помощью CSS можно задать такой вид строчных символов как «Капитель».

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

Текст с использованием капители

По своей высоте эта фраза не отличается от простого набора строчными символами, но стилистически они подстраиваются под заглавные символы.

Межстрочный интервал

Межстрочный интервал, или, как его ещё называют интерлиньяж — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создаётся расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.

Обобщённое правило

Теперь, для работы со шрифтами, вы знаете все основные правила. Это:

Использование одного правила или нескольких

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Источник

Записки недизайнера

В погоне за вчерашним днём

July 2013

Капитель

Капитель — это заглавные буквы, размер которых приближен к строчным буквам.
Использование

Часто их используют просто для художественного эффекта, однако в типографике для них существует реальное практическое применение. Иногда в начале статьи или главы первая строка или её часть набрана капителью. Это простой и элегантный способ ввести читателя в текст.

Если вы наберёте аббревиатуру обычными прописными, то визуально она будет слишком сильно выделяться. Согласно стандарту это и есть одно из мест для практического применения капители.

В английском языке «А.М» (до полудня) и «P.М» (после полудня) также набираются капителью.

У большинства программ в меню для форматирования или работы со шрифтом есть команда «изменить все выбранные строчные буквы на маленькие прописные». Если такой команды нет, наберите текст большими прописными и затем уменьшите выбранные буквы примерно до 70% от размера в пунктах основного шрифта. Это способ для второсортных проектов.

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

Если вам необходимо использовать шрифт, у которого нет подходящего набора для маленьких прописных, попробуйте использовать полужирное начертание (если есть) для капители, чтобы при уменьшении их размера, их толстые штрихи тоже сократились. Или вы можете попробовать изменить неподходящий размер маленьких прописных — если компьютер устанавливает размер капители на 70%, попробуйте изменить его, скажем, на 82%, чтобы он лучше подходил по толщине штрихов.

Есть всего лишь несколько гарнитур, которые включают в себя «реально нарисованные» маленькие прописные. Это буквы, дизайн которых совершенно изменён специально для того, чтобы они подходили по размеру и толщине к соответствующим заглавным буквам.

Читабельность и разборчивость капители

Маленькие прописные читаются не легче, чем все обычные прописные. Хотя капителью иногда набирают цитаты и заголовки.

Используйте их, когда потеря читабельности и разборчивости оправданы. Чем больше по объёму текст, набранный капителью, тем меньше вероятность того, что его кто-нибудь прочтёт.

Источник: Р. Уильямс «Недизайнерская книга о шрифтах».

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

Некоторые типографы предпочитают использовать капитель для почтовых индексов (San Francisco, CA 94119) и географических акронимов, состоящих более чем из двух букв. Например, USA (США) или испанский аналог этой аббревиатуры los EEUU (los Estados Unidos, испанское сокращение для США), Sydney NSW (Сидней, штат Новый Южный Уэльс). Но когда в тексте встречаются и длительные, и короткие сокращения, необходимо соблюдать единообразие. С точки зрения типографа предпотительнее использовать капитель в шрифтах с тонкими элементами и мелким очком строчных, а прописные — в шрифтах с мощными формами и крупным очком строчных.

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

Такие сокращения, как CD (СД), TV (ТВ), USA (США), UFO (НЛО) набираются прописными или капителью, потому что мы их произносим по буквам. Сокращения типа UNESCO (ЮНЕСКО), ASCII (АСКИИ) и FORTRAN (ФОРТРАН), которые произносятся не по буквам, а как единое слово, в принципе по законам языка должны писаться строчными буквами, но пока правила их написания находятся в процессе определения. Когда автор текста включает их в свой язык и к ээтому же призывает читателей, приходит время и типографу внести эти аббревиатуры в общепринятый язык типографики, проявлением чего является набор их строчными буквами (Unesco, Ascii (или ascii) и Fortran. Другие сокращения, например, laser или radar, уже прошли этот длительный путь.

Источник: Р. Брингхёрст «Основы стиля в типографике».

Posted on Feb. 19th, 2013 at 05:28 pm | Link | Leave a comment | Share | Flag

Источник