Большое внимание уделяется тому, как выглядит текст в печатном материале, но насколько мы заботимся, чтобы текст в веб-проектах был максимально читабельным и точным? Перевод, через браузер не является подходящим инструментом для составления текста, он перестает быть актуальным. В этой статье я попытаюсь обсудить некоторые из менее известных атрибутов CSS отвечающих за его внешний вид.
Типичные особенности в браузерах обрабатывались годами, и очень долго мы не могли даже выбрать шрифт, за исключением тех, которые были установлены в операционной системе браузера. Когда это изменилось, началась настоящая революция в онлайн-типографии. В дополнение к неограниченному количеству шрифтов, которые стали доступны для использования, мы также смогли начать использовать шрифты OpenType, такие как, например, нули. Но прежде чем мы достигнем их, я хотел бы упомянуть тех, которые более очевидны.
Толщина текста
Атрибут font-weight используется для определения толщины шрифта в CSS. Помимо его наиболее узнаваемых значений, которые являются нормальными и жирными, мы также используем численные (от 100 до 900) и относительные (более легкие и смелые). Нормальные и жирные значения — это не более 400 и 700 ключевых слов соответственно. Менее обычно используются относительные значения. Их действие основано на значении атрибута font-weight элемента. Если у родителя будет установлен шрифт 400, в результате у нас получится более толстый вариант и наоборот – более тонкий. Имейте в виду, что не каждый шрифт поддерживает весь диапазон толщины, поэтому не все значения будут работать для разных типов.
Стиль текста
Всем известен атрибут стиля шрифта и его значения: нормальный и курсивный. Не все знают, что есть и третья, а именно наклонная (которую мы переводим как «диагональ»). Его использование точно такое же, как и italica, но это небольшая разница во внешности. В отличие от курсивного стиля, наклонные стили не используют новые глифы и только «сгибают» их обычным способом. Поэтому взгляд букв должен быть ближе к оригиналу. Как и при толщине текста, важно помнить, что не все шрифты имеют наклонный стиль, поэтому этот параметр может работать не везде.
Декорация текста
Возможно, это не типографский элемент строгого смысла, но я думаю, что в этой статье стоит упомянуть. Атрибут text-decoration принимает обычно значения underline (подчеркивание) или none (нет подчеркивания). Большинство браузеров также поддерживает значения: line-through (перечеркнутый) и оверлайна (линия более). Все эти атрибуты также могут быть объединены. До сих пор оформление текста всегда было в его цвете, и это всегда была горизонтальная линия. Он медленно меняется. Последние версии браузеров начинают поддерживать атрибуты text-decoration-color для окраски строк и стилей оформления текста для линий (сплошные, двойные, пунктирные, пунктирные, волнистые). Полная поддержка этой функции имеет момент, чтобы написать эту статью только в Firefox, вскоре получит Chrome.
Выравнивание текста
Мы все знаем, как работает атрибут text-align. Однако мало кто из вас когда-либо использовал атрибут text-align-last. Он принимает те же значения, что и первый, и описывает, как выровнять последнюю строку в тексте. Например, когда у нас есть текст, который мы выровняли по ширине, мы можем заставить последнюю строку быть выравненной (конечно, она будет выглядеть ужасно). Мы также можем сосредоточить его по центру, что даст гораздо лучший эффект.
Отступ текста
Вопреки тому, что думает множество людей, создающих тексты в интернете, для создания отступа не используется пробел. Для этого используйте атрибут text-indent. В будущем, возможно, также будет возможно добавить отступ после каждого разрыва строки (?) С каждым значением строки и для подчеркивания (отступ будет добавлен ко всем строкам, кроме первого), используя значение подвешивания. Оба этих новых значения в настоящее время не поддерживаются ни одним из браузеров.
тень
Он поддерживается любым современным браузером с использованием атрибута text-shadow. В качестве значения он принимает: смещение по оси X и Y, размер размытия и цвет. Вы можете добавить несколько теней к тексту, разделив их запятыми, чтобы создать интересные эффекты.
преобразования
Ошибка, аналогичная написанию отступов, заключается в том, чтобы писать текст (например, заголовки статей) заглавными буквами, а не использовать преобразование. Почему? Когда необходимо создать новую версию страницы, где не рекомендуются капиталы, все тексты, написанные таким образом, должны быть переписаны. Не говоря уже о том, что заглавный текст точно сканирует на Google, что не будет выглядеть хорошо. Мы изменим преобразования, используя атрибут text-transform, и он принимает следующие значения: capize — преобразует первую букву каждого слова в верхний регистр, в верхнем регистре — преобразует все буквы в верхний регистр, в нижний регистр — преобразует все буквы в маленькие, а не по умолчанию, без преобразования.
Интервал между символами и словами
В спецификации CSS версии 2 доступны как межстрочные интервалы, так и интервалы между словами, но интервал между символами плохо поддерживается в Internet Explorer, а браузеру нужен префикс для использования в браузерах, работающих на движке Webkit. В настоящее время оба работают в каждом браузере. Интервал между символами может использоваться, например, для улучшения читаемости текста, который написан в шапках. Использование пробелов между словами в типографии мне не известно, но такая функция есть, и стоит о ней упомянуть.
Вдовы и ублюдки
Это было бы доброе имя для трансляции телешоу во второй половине дня. В Widow DTP короткое слово или конец слова, которое будет передано в конце строки. Чтобы избавиться от вдов, в CSS у нас есть атрибут Widows. Он указывает минимальное количество строк, которые должны оставаться на одной странице на новой странице, поэтому следует избегать этих вдов (и ублюдков). Аналогично, атрибут orphan работает одинаково, но мы определяем минимальное количество строк в нем, которое может оставаться в стороне в нижней части страницы. И писать страницу — я имею в виду печатную страницу. Оба эти атрибута учитываются только в печати, на веб-сайте я не буду оказывать никакого эффекта.
Разделение слов
Разделение слов особенно полезно, когда мы хотим оправдать текст. Чтобы браузер автоматически разделил слова, просто используйте атрибут дефисов и установите его в авто. Просто так? К сожалению … самый популярный браузер сегодня — Chrome — не поддерживает перенос. В этом отношении он даже опережает Internet Explorer (здесь достаточно использовать префикс -ms-hypens). К счастью, есть довольно умный сценарий JavaScript, который позволит нам делиться словами в каждом браузере: Hyphenator.
Выделите первый абзац, первую строку и первую букву
Первый элемент данного родителя всегда можно легко найти с помощью селектора: first-child. Если текст начинается с заголовка, например, и мы хотим обратиться к первому абзацу статьи, лучше использовать селектор первого типа. Этот эффект можно увидеть на нашей текущей странице. Pseudoelement :: first-line позволяет вам создать уникальный стиль для первой строки элемента. Под псевдоэлементом :: first-letter мы можем применить выбранный стиль только к первой букве элемента. Мы можем использовать это, чтобы создать впечатляющую первую букву текста из старых ручных книг-каллиграфов.
кернинг
Мы используем атрибут font-kerning для управления кернингами. Он может принимать три значения: normal — что заставляет кернинг использовать (если у шрифта есть соответствующая информация об этом), none — заставляет кернинг выключать и автоматически отключает кернинг с небольшими размерами шрифта, где это может показаться странным. Кернинг не поддерживается Internet Explorer и Edge, поэтому, если ваш текст идет туда, это, вероятно, ошибка кернинга.
Функции Zecerkie
Это одно из преимуществ стандарта OpenType. Например, мы можем использовать лигатуры или альтернативный набор символов. Конечно, это зависит от наличия соответствующих символов и информации в шрифте. Функциональность критериев обеспечивается атрибутом font-feature-settings. Каждая функция запускается подходящими ключевыми словами, которые могут быть связаны друг с другом. По умолчанию функция lecure включена по умолчанию. Лигатура-это глиф в шрифте цифровом, которых ушко (рисунок) содержит два (как минимум), соединенные буквы в виде одного общего, нового символа, например в сочетании букв fi, если точка с буквы и одновременно является шарик на конце буквы » f » (Википедия), Вы можете проверить это самостоятельно, отключив лигатуры, используя: font-feature-settings: «liga» 0; («Лига» — это ключевое слово, соответствующее функции, а цифра 0 является признаком того, что она должна быть отключена). В аудио Roboto вы увидите, что буквы f и i выглядят по-разному.
Другим примером автоматически включенной функции являются контекстные варианты. Это альтернативные символы, предназначенные для использования, например, для улучшения соединений с другими персонажами. Чаще всего они встречаются в шрифтах почерка. Чтобы отключить эту функцию, введите: font-feature-settings: «calt» 0;. К сожалению, с контекстными вариантами мы редко находим бесплатные шрифты.
Функции Zecerski, которые по умолчанию исключены, представляют собой, например, капиталы, закорючки или стилистические альтернативы. Чтобы включить их, мы используем следующие ключевые слова: smcp, swsh и salt. Что такое капитель, наверное, каждый из Вас знает. CSS-код, который позволяет им включать: font-feature-settings: «smcp» 1;. Закорючки-это декоративные знаки, имеющие длинные линии, возникающие в начале или в конце письма. Подобно контекстуальным вариантам, они, как правило, недоступны в бесплатных шрифтах. Стилистические альтернативы включают, например, появление буквы &, буквы g или a. Ключевое слово salt включает все доступные альтернативы. Однако, если мы хотим выбрать какую-то конкретную и включить только ее, мы должны использовать ключевое слово, отвечающего соответствующему комплекту ss ## (где ## — число от 01 до 20). Здесь царит полный произвол, что до того, какой набор находится под каким числом, также, для каждого шрифта нужно искать „на ощупь”. Конечно, мы можем объединить несколько наборов одновременно с помощью кода: font-feature-settings: «ss01» 1, «ss03» 1;.
Полный набор функций и примеров Zecer доступен на странице справки Adobe.