Жирный шрифт и курсив CSS
Чтобы сделать шрифт жирным в CSS либо задать ему курсивное начертание, вам пригодятся такие свойства, как font-weight и font-style . Ниже мы разберемся, какие значения могут быть использованы для этих свойств.
Жирный шрифт в CSS: свойство font-weight
Управлять жирностью шрифта в CSS можно с помощью значений свойства font-weight :
bold | Полужирный шрифт |
normal | Обычный шрифт |
bolder | Более жирный шрифт, чем у родителя |
lighter | Менее жирный шрифт, чем у родителя |
inherit | Наследует значение родителя |
Числовое значение от 100 до 900 | От очень тонкого до очень жирного шрифта |
Насыщенность шрифта вы можете регулировать с помощью ключевых слов bold (полужирное), normal (обычное начертание), bolder (более жирное, чем у родителя), lighter (менее жирное, чем у родителя), inherit (такое же, как у родителя), а также используя числовые значения 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 и 900 , настраивая жирность шрифта от самого тонкого до самого плотного.
Примечание: числовые значения от 100 до 900, означающие толщину шрифта, сработают только в том случае, если у шрифта, с которым вы работаете, предусмотрены эти варианты начертания. Данные значения используются в основном с веб-шрифтами, о которых мы говорили в первой подглаве.
Курсив в CSS: свойство font-style
Задать курсивное начертание шрифта можно при помощи значений свойства font-style :
italic | Курсивный шрифт |
oblique | Наклонный шрифт |
normal | Обычный шрифт |
inherit | Наследует значение родителя |
Чтобы сделать курсив в CSS, используйте значение italic . Второе значение в таблице – oblique – означает наклонное начертание и отличается от курсива тем, что все символы с обычным начертанием просто наклоняются вправо, в то время как курсив – это отдельно созданный вариант начертания шрифта, похожий на рукописный.
Значение normal устанавливает обычный стиль шрифта, а inherit позволяет наследовать стиль родителя.
Далее в книге: строчные и заглавные буквы с помощью свойства CSS text-transform.
font-style
На этой странице
font-style это CSS свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его font-family .
Italic шрифты в общем курсивные по своей сути, обычно занимают меньше горизонтального пространства чем их нестилизированные копии, тогда как oblique шрифты обычно просто наклонная версия регулярного шрифта. Когда определённый стиль не доступен, оба italic и oblique шрифты симулируются искусственно наклоняя глифы регулярного шрифта (используйте font-synthesis для управления этим поведением).
Syntax
Свойство font-style определяется как единственное ключевое слово выбранное из списка значений внизу.
Курсив CSS
В прошлой статье мы обсуждали спецификацию выделения текста жирным шрифтом. В текущей статье мы поговорим о том, как выделить текст курсивом HTML. Как и в случае с жирным текстом, курсивный текст можно сделать тремя способами:
- Тег i HTML;
- Тег em HTML;
- CSS-свойство font-style.
Рассмотрим все три варианта, как можно сделать курсив в HTML, обсудим тонкости этого вопроса и какие способы удобнее и правильнее использовать в тех или иных ситуациях.
Курсивный текст: тег
Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i:
Таким образом, нужная часть текста помещается между тегами .
Курсивный текст: тег
Хотя тег i остается валидным, с точки зрения оптимизации сайта лучше использовать тег em для выделения логически важных участков текста. Это означает, что поисковые роботы учитывают важность текста, помещенного между тегами :
Конструктор сайтов «Нубекс»
Но не стоит забывать, что текст, заключенный в теги i и em, хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.
Курсивный текст силами CSS
Для установления стилей отображения шрифтов в CSS применяется свойство font-style, которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).
Стоит помнить о том, что курсивный шрифт и наклонный, по своей сути, не являются одним и тем же. Курсив — это особый шрифт, который является аналогом рукописного текста, а наклонный формируется посредством наклона обычного шрифта вправо.
Применение атрибута font-style на практике:
Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique; могут интерпретировать не как наклонный текст, а как курсивный.
12 малоизвестных возможностей CSS
CSS — не очень сложный язык. Но даже если вы пишете таблицы стилей в течении многих лет, наверняка бывают моменты, когда вы узнаете еще что-нибудь новенькое: свойства или значения, которые вам не доводилось использовать, детали спецификации, о которых вы не имели понятия.
В процессе работы с CSS я постоянно нахожу что-нибудь интересненькое, так что решил написать пост и поделиться своими знаниями с вами. Правда, учитывайте, что не всё, о чем будет рассказано, имеет непосредственное практическое значение, но, на всякий случай, в хозяйстве пригодится.
color не только текст красит
Начнем, пожалуй, с простых вещей. Свойство color используется разработчиками постоянно. Те из вас, у кого не так много опыта работы с CSS, возможно, и не знали, что это свойство определяет не только цвет текста!
Обратите внимание, что в CSS свойство color:yellow используется лишь раз применительно к элементу body . Как видите, всё окрасилось в желтый цвет:
- Альтернативный текст на месте отсутствующего изображения
- Рамка у элементов списка
- Маркер ненумерованного списка
- Номер упорядоченного списка
- Элемент hr
Интересно, что по умолчанию элемент hr не наследует значение свойства color , однако этого можно достичь, установив свойству border-color значение inherit . Как по мне, так это несколько странное поведение.
Данное свойство описывает цвет переднего плана текстового содержимого элемента. В дополнение к этому оно может косвенно использоваться другими свойствами, которые принимают значения цвета.
Я пока не придумал, что же это такое, «передний план», однако если вы что-то знаете, напишите об этом в комментариях. Насколько я понимаю, под передним планом в данном случае понимается цвет самого текста, а не фона, а также не фоновых элементов, — прим. переводчика.
Свойство visibility может иметь значение collapse
Вам наверняка доводилось использовать свойство visibility , и не раз. «Обычные» значения — visible (по умолчанию у всех элементов) и hidden , которое скрывает элемент, оставляя при этом под него место (в отличие от display:none ).
Третье, редко используемое значение — collapse . Работает так же, как и hidden применительно ко всем элементам, кроме табличных рядов, колонок и их групп. В случае с элементами таблиц предполагается, что значение collapse скроет их подобно display:none таким образом, что на ранее занимаемом ими месте расположится другое содержимое таблицы.
К сожалению, не все браузеры одинаково обрабатывают данное значение. По этой причине альманах CSS-Tricks вообще не рекомендует использовать данное свойство. Попробуйте демо.
Из того, что обнаружил я:
- В Хроме разницы между collapse и hidden не наблюдается (посмотрите этот баг репорт и комментарии)
- В Файрфоксе, Опере и ИЕ 11 collapse , похоже, работает как следует: ряд таблицы удаляется, а тот, что был ниже, поднимается наверх
Теперь вы знаете чуточку больше, тем не менее из-за разного поведения браузеров использовать visibility:collapse вряд ли имеет смысл.
Новые значения свойства background
В CSS 2.1 короткая запись свойства background включала в себя пять значений следующих свойств: background-color , background-image , background-repeat , background-attachment и background-position . Начиная с CSS 3 добавилось еще три значения, так что данное свойство теперь выглядит так:
Обратите внимание на слеш, который ставится там подобно короткой записи свойства font и border-radius [ссылка]. Этот слеш позволит вам включить значение background-size после background-position в тех браузерах, которые это поддерживают. Также вы можете добавить еще два значения: background-origin и background-clip .
Попробовать можно здесь.
Новые значения работают во всех современных браузерах, однако и про старичков забывать не стоит, предлагая адекватную замену.
Свойство clip работает только на абсолютно спозиционированных элементах
Наверняка вы в курсе свойства clip . Используется оно так:
Данное правило «обрежет» элемент с четырех сторон на указанное количество пикселей. Единственный нюанс состоит в том, что элемент, к которому вы применяете данное свойство, должен быть спозиционирован абсолютно.
А теперь посмотрите, как свойство clip перестает работать, если мы уберем абсолютное позиционирование элемента.
Помимо position:absolute вы также можете использовать position:fixed , поскольку, согласно документации, зафиксированные элементы также квалифицируются как «абсолютно спозиционированные».
Вертикальные проценты рассчитываются относительно ширины контейнера, а не его высоты
По началу это трудно понять, и я об этом писал. Возможно, вы знаете, что длины элементов, указанные в процентах, рассчитываются, исходя из длины их контейнера. Так вот, верхние и нижние внутренние отступы (padding) и те же внешние (margin) тоже рассчитываются исходя из ширины контейнера, а не его высоты.
Заметьте, что вложенный элемент имеет три отступа, заданных в процентах (верхний и нижний внутренние отступы и нижний внешний отступ). Слайдер изменяет только ширину контейнера. Однако её изменение влияет на просчет отступов. Зависимость именно от ширины контейнера показана в выводе величин на страницу.
Свойство border
Все мы когда-либо делали это:
Свойство border объединяет значения свойств border-width , border-style и border-color в единую конструкцию. Но не забывайте, что каждое из свойств, значение которых содержит border , само по себе является сокращенной записью. Так, например, border-width может быть записано следующим образом:
Таким образом мы установим разную ширину рамки для всех четырех сторон элемента. То же относится и к свойствам border-style и border-color . Нечто вот такое ужасное можно получить:
Можно пойти еще дальше и задать эти значения по отдельности с помощью свойств border-left-style , border-top-width , border-bottom-color и так далее.
Фишка в том, что с помощью border вы не сможете задать разные значения для разных сторон. Таким образом, получается нечто вроде сокращенной записи внутри сокращенной записи внутри сокращенной записи.
Свойство text-decoration — теперь сокращенная запись
Я знал: что-нибудь из этого списка обязательно вскружит вам голову. А спецификация гласит, что теперь это стандарт.
Данное свойство теперь может содержать в себе значения трех свойств: text-decoration-line , text-decoration-color и text-decoration-style . К сожалению, Файрфокс — единственный браузер, который поддерживает новые свойства, но при этом (видимо, для обеспечения обратной совместимости) не поддерживает сокращенный синтаксис.
Попробуйте эту демку в Файрфоксе. В ней новые свойства используются по отдельности. С ними надо быть аккуратнее, ибо в данное время браузеры не смогут распарсить дополнительные значения у свойства text-decoration и просто пропустят его. А это нехорошо с точки зрения обратной совместимости.
Свойство border-width поддерживает ключевые значения
Это, конечно, не нечто из ряда вон выходящее, да и не ново, тем не менее помимо обычных значений ширины (напр., 5px или 1em ) border-width поддерживает три ключевых значения: medium , thin и thick .
По факту, начальное значение свойтва border-width — medium . Ниже продемонстрировано значение thick :
В спецификации CSS конкретная ширина для ключевых значений не прописана, однако все браузеры используют 1px , 3px и 5px соответственно.
«Никто не использует border-image »
Не так давно я писал о свойстве border-image на SitePoint. Оно поддерживается всеми современными браузерами, за исключением IE 10 и ниже. Но кому какая разница?
border-image — весьма забавное свойство, которое позволяет обрамлять контейнер неким изображением.
К сожалению, border-image — одна из новинок, пользующаяся недостаточной популярностью. Хотя, возможно, я не прав. Если у вас есть примеры использования border-image — добро пожаловать в комментарии!
Есть такое свойство empty-cells
И оно поддерживается всеми браузерами, включая IE 8:
Думаю, вы уже поняли, что используется это свойство применительно к таблицам. Оно указывает браузеру скрыть или показывать пустые ячейки. Попробуйте это демо.
В данном случае я специально выставил рамку у ячеек и добавил небольшие отступы, чтобы была видна разница между двумя состояниями, хотя в некоторых случаях изменение данного свойства может не иметь никакого визуального эффекта.
Свойство font-style поддерживает значение oblique
Наиболее используемые значения данного свойства — normal и italic . Но есть еще и oblique .
И что же это значит? Почему текст выглядит так же, как если бы он был написан курсивом?
Спецификация объясняет данное поведение следующим образом:
… выбирает шрифт, помеченный как наклонный, иначе — курсивный.
Описание курсива в спецификации — примерно о том же. Термин «наклонный» (oblique) — из типографики, обозначает, собственно, наклоненный текст, но не настоящий италик.
CSS обрабатывает наклонный текст таким образом, что значение oblique взаимозаменяемо с italic (так говорится в спецификации) до тех пор, пока используемый шрифт не имеет отдельного наклонного начертания.
Не знаю шрифтов, которые бы имели наклонное начертание, но я могу ошибаться. (Ошибается. Сам привести конкретных названий шрифтов не могу (они однозначно существуют), но в комментариях к оригинальной статье в пример приводят шрифт Helvetica, — прим. переводчика) Насколько я понял, шрифт не может иметь оба начертания: курсив и наклонное — одновременно, поскольку наклонное начертание является искусственной заменой курсива в тех шрифтах, в которых его нет. (Здесь тоже несколько сомнительно, особенно что касается замены курсива, — прим. переводчика)
Так что, если я не ошибаюсь, когда шрифт не имеет курсивного начертания, значение свойства font-style:italic на самом деле покажет нам значение свойства font-style:oblique .
Большое спасибо Ogi за комментарии относительно путаницы в терминологии, теперь это исправлено и вместо «гарнитуры» — «начертание», а вместо «италика» — «курсив», — прим. переводчика
word-wrap — то же, что и overflow-wrap
Свойство word-wrap используется не так часто, однако в некоторых случаях может оказаться полезным. Очень распространенный пример — разбиение длинной непрерывной строки текста во избежание выхода за пределы контейнера.
Поскольку данное свойство придумали в Microsoft, оно поддерживается всеми браузерами, в том числе IE с версии 5.5.
Несмотря на кросс-браузерность и надлежащую поддержку, W3C решило заменить свойство word-wrap на overflow-wrap : по всей видимости, они посчитали прежнее название неправильным. overflow-wrap имеет те же значения, что и word-wrap , а последнее сейчас рассматривается как «альтернативное».
Несмотря на то, что поддержка overflow-wrap еще мало распространена, не стоит переживать, ибо мы все так же можем использовать word-wrap : браузеры его поддерживают в том числе и в целях обратной совместимости.
Что до overflow-wrap — там уж когда все популярные браузеры обновятся, а пока я не вижу смысла что-то менять.
Много ли нового узнали вы из всего этого?
Хоть что-нибудь — уже хорошо. Наверняка крутые ребята знают большую часть, если не всё из вышеперечисленного. Но менее продвинутым разработчикам это узнать весьма полезно.
font-style
Браузер | Internet Explorer | Netтscape | Опера | Safari | Mozilla Firefox | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Версия | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
Краткая информация
CSS (ЦСС) | CSS (ЦСС)2 |
---|---|
Значение по умолчанию | normal |
Наследуется | Да |
Применяется | Ко всем элементам |
Аналог ШТМЛ | |
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.ШТМЛ#propdef-font-style |
Описание
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для контента установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида контента. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати объекта.
Синтаксис
font-style: normal | italic | oblique
Аргументы
ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 1.
Рис. 1. Применение параметра font-style
Объектная модель
[window.]document.getElementBy >elementID «).style.fontStyle
Примечание
В браузере Internet Эксплорер шрифт со значением italic и oblique всегда показывается как курсив.
Каскадные таблицы стилей CSS советы & приёмы
Смотрите также указатель всех приёмов работы.
Семейства шрифтов
После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.
Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.
Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:
‘sans-serif’: обычные шрифты без засечек | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Arial, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Helvetica, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Verdana, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Trebuchet MS, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Gill Sans, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Noto Sans, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Arial Narrow, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
‘serif’: обычные шрифты с засечками | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Times, Times New Roman, serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Georgia, serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Palatino, URW Palladio L, serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bookman, URW Bookman L, serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
New Century Schoolbook, TeX Gyre Schola, serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
‘monospace’: шрифты фиксированной ширины | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Andale Mono, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Courier New, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Courier, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
FreeMono, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
DejaVu Sans Mono, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
monospace | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
‘cursive’: шрифты, имитирующие почерк | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comic Sans MS, Comic Sans, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bradley Hand, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Brush Script MT, Brush Script Std, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Snell Roundhand, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
URW Chancery L, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
cursive | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
‘fantasy’: декоративные шрифты, для названий и т.д.. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Impact, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Luminari, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Marker Felt, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Trattatello, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
fantasy | Съешь же ещё этих мягких французских булок да выпей чаю
Стили шрифтовБольшинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии. В таблице ниже приведены несколько различных стилей. Многие из строк будут выглядеть одинаково, если у вас нет большой коллекции шрифтов.
Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений. Навигация по сайтуCreated 17 Jan 2001; Font-style в CSSВсем привет! Стиль шрифта в CSSСвойство «FONT-STYLE»
Толщина шрифта в CSSСвойство «FONT-WEIGHT»
Можно указать толщину шрифта и обычными цифрами от 100 до 900.
Размер шрифта в CSSСвойство «FONT-SIZE» Значение задается в « px » и « % ». Шрифты в CSSСвойство «FONT-FAMILY» Можно задавать в правилах несколько шрифтов. Это на тот случай, если у пользователя нет первого шрифта, тогда подключится второй. Обратите внимание, шрифт « «Times New Roman» » написан в кавычках ( » » ). Семейство шрифтов
А можно и вот так: Подключение нестандартных шрифтов в CSSСвойство «@FONT-FACE»
Вот полный пример с подключением нестандартного шрифта и его использование. Оформление шрифтов в CSSСвойствами CSS можно задавать разные шрифты разным элементам веб-страницы, а также указать их начертание, размер, цвет и другие параметры. Рассмотрим доступные свойства. font-familyПозволяет определить, каким шрифтом будет написан текст. Для группировки шрифтов в CSS используется два типа имён: generic-family и family-name. generic-family содержит пять базовых семейств шрифтов, которые можно найти практически на любом компьютере.
family-name определяет не семейство, а один шрифт: “Arial Black”, Verdana. В качестве значений свойства font-family семейства и шрифты перечисляются через запятую. Браузер определяет, установлен ли на ПК пользователя первый в списке шрифт, и если да, то отображает текст им, если нет — переходит к следующему и т. д. Если имя шрифта содержит спецсимволы или состоит из нескольких слов (содержит пробел), то его надо брать в кавычки. font-styleЗадаёт курсивное (значение italic), наклонное (oblique) или стандартное (normal) начертание текста. Создаёт такую страницу: font-sizeВажное свойство, которое определяет размер шрифта. Его можно задавать разными способами.
Обратите внимание: между числом и единицами измерения пробела быть не должно.
font-variantПредлагает два значения:
Чтобы понять, разницу лучше один раз увидеть: font-weightВлияет на насыщенность (жирность) шрифта. Значения могут быть такими:
colorОпределяет цвет шрифта. Может задаваться следующими способами
Пример ниже задаёт абзацу серый цвет:
1. H (hue — оттенок). Определяется в градусах от 0 до 359° в зависимости от цвета на цветовом круге (рисунок ниже). 2. S (Saturate — оттенок). Указывается в процентах. Понятно, что от 0 до 100%, и понятно, что чем больше процент, тем насыщеннее цвет. 3. L (lightness — яркость). Так же, как и насыщенность, устанавливается в процентах. Зададим ссылкам насыщенный красный цвет
Позволяет объединить все свойства шрифта в одной строке и может тем самым сильно сократить код. Имеет следующую структуру: Свойства должны записываться именно в такой последовательности (чтобы не задавать значение, его можно просто пропустить). Полезные ссылки:
Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSSЗдравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня будет очередная статья, вносящая свой вклад в составление справочника по Css. Речь в ней пойдет уже не о селекторах, а о свойствах таблиц каскадных стилей, а именно о свойствах, которые используются для оформления шрифтов в Html коде: font-family (weight, size, style, variant) и line-height. Постараюсь при этом максимально наглядно показать их работу, рассказать о синтаксисе и способах использования. Если вы впервые столкнулись с понятием стилевого оформления кода, то советую начать углубляться в тему с основ (что такое CSS), а дальше уже идти по порядку, формирующему очередность материалов в упомянутом выше справочнике (вплоть до этой статьи). Собственно, во всех предыдущих материалах мы лишь во всех подробностях изучили тему селекторов, а сами свойства начинаем разбирать только сейчас. Font-family — задаем тип и гарнитуру шрифта в CSSНужно будет предварительно сказать, что все свойства, используемые для оформления шрифтов (Font и Line Height) в Html коде, наследуются: Итак, с помощью font-family можно задать гарнитуру и тип шрифта, который вам требуется применить к какому-то конкретному тегу (например, к абзаца P или же заголовков). Понятно, что элемент, к которому требуется применить это свойство, вы будете задавать в Css коде с помощью селекторов (о них мы с вами уже подробно поговорили и в начале публикации приведена соответствующая ссылка). Позволю себе напомнить вам синтаксис написания CSS правил: Т.е. сначала пишется свойство, а через двоеточие — значение для него. Правила, прописанные для каждого селектора, отделяются друг от друга точкой с запятой (после последнего ее можно не ставить): Теперь давайте перейдем непосредственно к синтаксису font-family, ибо тут есть небольшие нюансы. В этом CSS свойстве нужно перечислить гарнитуры шрифтов в порядке убывания их приоритета (если на компьютере пользователя не будет установлен первый, то применен будет второй из списка, ну и т.д. по списку), а в конце нужно будет дописать семейство, например, sans-serif (если ни одного из перечисленных шрифтов на компьютере пользователя не обнаружится, то будет применен один из указанного семейства). В приведенном примере браузер сначала поищет на компьютере пользователя установленный Arial, и если его найдет, то данный Html элемент им и будет в результате отрисован. А если Arial на компьютере пользователя найден не будет? Тогда браузер поищет Geneva, а в случае неудачи — Helvetica, ибо он идет следующим по убыванию приоритета в font-family. Понятно? Ну, а если пользователь окажется настолько экзальтированным, что ничего из перечисленного в этом свойстве на его компе найдено не будет, то данный элемент будет отрисован тем шрифтом, который у этого пользователя выбран по умолчанию для семейства sans-serif (без засечек или, по другому, рубленные). Существуют еще семейства Serif (с засечками) и monospace (моноширинные), которые вы также можете использовать в Font-family для указания типа. Да чего я объясняю?! Ведь это все в точности повторяет задание шрифтов в теге Font через атрибут Face, который сейчас считается не рекомендуемым (не валидным) и которому на смену как раз и пришло CSS свойство Font. Тамже вы можете более подробно почитать про то, как пользователь может назначить умолчательные фонты различных типов: Еще, кстати, написано, что существует проблема использования на сайте абсолютно любых фонтов, ибо они должны быть обязательно установлены на компьютерах пользователей. Считается, что с большой долей вероятности на компьютере пользователя будут установлены только около десятка (Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS), а значит именно их вы можете без опаски использовать в правилах с Font-family. Но довольно интересный выход из этой ситуации предложил Google (онлайн шрифты для вашего сайта). Суть состоит в том, что браузер будет искать данные красивые гарнитуры (не входящих в десятку универсальных) не на компьютере пользователя, а на серверах Гугла, которые, как вы знаете, работают очень стабильно и с высоким аптаймом. Но вернемся к синтаксису нашего CSS свойства. Я уже упомянул, что здесь есть одна маленькая особенность. Если в названии гарнитуры (которую вы хотите использовать на сайте) имеются пробельные символы, то это название обязательно нужно будет заключить в двойные кавычки. Названия шрифтов, не содержащие пробелов в семействе Font-family, в кавычки заключать не обязательно: Font-size — задаем в CSS размер для шрифтаСледующее свойство Font-size служит для задания размера шрифта для какого-либо элемента в Html коде. У него есть свои особенности. Размер можно задавать как в абсолютных, так и в относительных единицах:
Можно использовать относительные единицы em и ex. Подробнее о них вы можете прочитать по ссылке, но если говорить кратко, то «em» — это высота шрифта, заданная для данного элемента по умолчанию или унаследованная, а «ex» — это высота латинской буквы «x» в нужной вам гарнитуре. Но размер «Ex» для разных браузеров может отличаться по отношению к «Em», поэтому в CSS свойствах font-size гораздо чаще используют относительные единицы размера шрифта в виде «Em». Например, если для заголовка задать: то этот самый заголовок будет отрисовываться фонтом в два раза большего размера, чем тот, который бы использовался для него по умолчанию (унаследовался бы от шрифта текста). Также относительные размеры в font size можно задавать и с помощью процентов, которые будут считаться от размера гарнитуры, который данный элемент получил по наследству. «Em», кстати, делает тоже самое. Один «Em» и 100% — это одно и то же: Кстати, гарнитура по умолчанию определяется используемым браузеров и эту информацию всегда можно посмотреть. В Firefox, например, вам достаточно для этого выбрать из верхнего меню «Настройки» — «Настройки» — вкладка «Содержимое»: В приведенном примере корневой элемент (тег Html) получит в наследство от настроек браузера пользователя именно фонт такого размера и такой гарнитуры. Ну, а дальше либо все будет наследоваться от элемента к элементу в глубь Html кода (вложенными элементами), либо вы сможете задать для тега размер в абсолютных величинах. В любом случае вы вольны будете с помощью font-size задавать в относительных единицах уменьшение или увеличение этого унаследованного размера. То же самое можно сказать и об умолчательной гарнитуре (которая в CSS задается через font-family) — она тоже передается по наследству тегу из настроек браузера пользователя. Все шрифтовые правила наследуются. Т.е., если вы написали в каком-то элементе правило Font-size, то этот размер будет передаваться во все вложенные в него теги (наследоваться). Это можно перебить уже прописанным для вложенного элемента правилом «Font-size» и т.д. Можно еще в качестве значений для этого свойства использовать одно из семи обозначений: xx-small, x-small, small, medium, large, x-large или xx-large. Что это такое? А это полный аналог того, как мы задавали размеры в чистом Html с помощью тега Font и атрибута Size. Но только там мы использовали числа от 1 до 7, а здесь используются названия, но суть осталась прежней, и размеры, заданные таким образом и через возможности чистого html, будут коррелироваться между собой: Свойства font-weight, line-height и font-style«Font-weight» в Css позволяет задавать нормальное (normal) или жирное (bold) начертание шрифта для того элемента, которому это свойство адресовано. Но на самом деле у него могут быть и другие значения. Их всего четыре буквенных плюс цифровая шкала:
Либо цифровые значения от 100 до 900 с шагом в 100 (от сверхтонкого до сверхжирного). Т.е. по этой шкале шрифт мог использовать много начертаний разной степени жирности. Изначально значение normal соответствовало 400, а значение bold — 700. Но на практике пока ни один браузер для «Font-weight» этого не поддерживает в полной мере. А жаль, иногда хочется использовать чуть более жирный или чуть более тонкий фонт, чем тот, что нам могут дать значения «normal» и «bold». Увы и ах, сейчас все цифры менее 400 дадут вам в итоге нормальный, а все что больше — жирный. Кстати, в одной из последних статей мы рассматривали такое понятие, как Css стили принятые по умолчанию, для оформления элементов в Html коде, если в файле таблиц каскадных стилей для этих элементов ничего не задано. Так вот там, например, для заголовков H1-H6 и тегов логического и физического выделения жирным (strong и B) определен стиль font weight со значением bolder: Т.е. разработчики стандарта языка стилевой разметки предполагали, что это будет работать и полностью поддерживаться браузерами, но пока что «Font-weight: bolder» интерпретируется большинством браузеров как «bold» и не более того. По умолчанию, свойство «font weight» имеет значение «normal» (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»). Следующее правило, которое у нас стоит на очереди и которое позволяете задать оформление шрифтов для имеющихся у вас Html элементов, это «Line-height», что означает — высота линии. Смысл этого правила в том, чтобы отодвинуть строчки текста на веб-странице друг от друга по высоте, ибо слепленные друг с другом строки становятся не читаемыми. В полиграфии это называется интер-линьяж. С помощью «Line-height» можно добавить или уменьшить пространство над и под строкой с текстом, изменяя таким образом всю высоту линии с текстом: Расстояние от текста (его размер задается через «font-size») откладывается симметрично (вверх и вниз одновременно). По умолчанию Css свойство «line height» для всех Html элементов с текстом будет иметь значение Normal (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»), которое зависит от типа используемого шрифта и вычисляется браузером автоматически. Например, для Arial высота линии равна примерно 120%, т.е. размер по вертикали всей строки (литеры плюс свободное пространство над и под ней) будет на 120% больше высоты шрифта. А для Times New Roman значение этого свойства по умолчанию будет уже примерно 125%. Для увеличения и уменьшения расстояния между строками текста можно использовать относительные значения для «Line-height» в виде процентов или «Em». Например, для сильного разрежения строк (увеличения высоты линии) можно написать: А если написать так: то высота линии станет меньше, чем высота шрифта (font-size), и строки текста попросту наедут друг на друга. В качестве значений для «Line-height» можно также использовать и любые абсолютные значения, которые принято использовать для шрифтов в таблицах каскадных стилей — пикселы (px), дюймы (in), пункты (pt). Либо можно использовать безразмерный множитель (любое число больше нуля). Например, для задания полуторного интервала между строками можно написать так: Следующее Css свойство — это «font-style», с его помощью можно задать наклонный шрифт (курсив). Для него по спецификации предусмотрено три варианта значений: normal, italic и oblique. Но на практике используются только первые два. Причем, значение «normal» является значением по умолчанию. Когда вы задаете для какого-либо элемента Html кода значение font-style:italic, то браузер будет искать нужную гарнитуру, помеченную как «italic» (т.е. курсивное начертание). Если сами вы зайдете через панель управления на своем компьютере в «шрифты» , то увидите там, что многие из них имеют вариант с «italic» или «курсив» в названии. Но есть шрифты (например, всем известный Tahoma), у которых разработчиками не было предусмотрено наклонного начертания. Что же сделает в этом случае браузер (если вы в font-style прописали italic)? А он будет сам пытаться наклонить буквы этого шрифта, раз об этом заблаговременно не позаботились его разработчики. Выглядеть это будет, конечно же, хуже. Ну, а значение oblique для font-style будет вынуждать браузер всегда наклонять шрифт своими средствами, даже если для него имеется курсивное начертание. Выглядеть это будет зачастую просто ужасно, поэтому значение «oblique» практически не используется. Ну и последнее из рассмотренных сегодня свойств таблиц каскадных стилей — font-variant, которое очень редко используется при верстке с учетом Html и CSS. По умолчанию в шрифтах начертание строчных букв отличается от заглавных не только размером, но и внешним видом самих литер. А вот «font-variant» позволяет, не изменяя размера строчных букв, сделать их начертание точно таким же, как и начертание заглавных. Соответственно, у этого свойства имеется всего два значения: normal (по умолчанию) и small-caps (начертание строчных будет таким же, как и у заглавных букв). Для русского языка это свойство используется крайне редко. Font — сборные правила в языке стилей CSSСборное правило Font, как и другие подобные в языке CSS, позволяет указать в нем значения отдельных элементарных свойств через пробелы. В большинстве случае порядок значений свойств в сборных правилах не важен, но вот в Font это не так. Здесь важен порядок следования значений и он должен быть именно таким, как показано на приведенном чуть выше скриншоте (кстати, скриншот сделан в snagit). Т.е. писать нужно будет примерно так: Но на самом деле, в сборном CSS правиле Font обязательны только два последних значения (font-family и font-size, даже без указания через слеш значения line-height). А какие же значения тогда браузер будет использовать для не указанных в нем свойств? Ну, очевидно, что значения, принятые для них по умолчанию (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»). А знаете почему обязательно указывать в этом сборном правиле значения для «font-family» и «font-size»? Да потому, что они не имеют как таковых значений по умолчанию (ибо они берутся из настроек браузера пользователя, как мы узнали чуть выше по тексту). Поэтому, если вы не хотите переопределять гарнитуру или размер шрифта, то сборное правило Font использовать не стоит (лучше использовать отдельные). Т.о. его в основном используют для тегов Html или Body, а для внутренних элементов, у которых гарнитура и размер фонта должны будут наследоваться, чаще всего используют отдельные Css свойства (font-weight, size, style). Если для внутренних элементов использовать это составное правило, то придется обязательно прописывать гарнитуру и размер. А если вы потом захотите их поменять? Что, будете лазить по всем составным сборным правилам Font в коде? Это неудобно. Поэтому оно и используется в основном только для внешних контейнеров. Но это так, размышления на тему. Чаще всего составное правило Font пишется без многих свойств, которые редко используют отличными от умолчательных: Т.е. здесь задается жирное начертание, указывается размер, высота линии и гарнитура. Ну, или еще проще: Это минимально возможная форма написания, в которой присутствуют только обязательные свойства «font-family» и «font-size». Все остальные будут использоваться браузером со значениями принятыми по умолчанию (normal). Описанный выше синтаксис сборного правила Font взят из спецификации: Свойство font-style, курсивНачертание текста можно задавать с помощью свойства font-style . Вот его основные значения:
Закономерный вопрос — а чем отличается курсивное и наклонное начертание? Если задано значение italic , браузер будет пытаться найти в заданном шрифте отдельное курсивное начертание символов. В некоторых шрифтах отдельный курсив предусмотрен. Если отдельного курсивного начертания в шрифте не предусмотрено, то браузер сделает текст наклонным, то есть сымитирует курсив. Что равноценно заданию тексту значения font-style: oblique . Закрепим теорию практикой.
День девятый. Точнее ночьВнезапно проснулся сегодня ночью , потому что мне приснился кошмар — а что, если верстальщики станут никому не нужны и уже скоро всё будут делать роботы? «Какая прекрасная мысль», — подумал я, перевернулся на другой бок и заснул. |