CSS: Изменение шрифта. Оформление шрифтов в CSS
Традиционно принято выделять главные мысли в тексте с помощью жирного начертания. Такой способ оформления, прежде всего, относится к заголовкам, так как необходимо, чтобы читающий сразу обращал на них внимание. Свойство CSS font- weight - простое средство регулировать насыщенность шрифта.
Новичков в программировании интересует вопрос о том, зачем изучать подробно технологию оформления текста стилями. Почти на каждом сайте (а особенно это касается ресурсов на основе систем управления контентом) присутствует визуальный редактор, аналогичный приложению MS Word. Чтобы работать с ним, специальные знания не нужны. Однако использование встроенных средств оформления текста не всегда оправдано, поскольку важно не только сделать текст жирным, но и выделить его так, чтобы поисковые системы адекватно восприняли написанное.
Как изменить насыщенность текста
Назначить толщину тексту можно использую HTML-теги < b> или < strong> . Но первоначальная функция этих элементов - структурирование. Если использовать теги слишком часто, поисковики признают текст «переоптимизированным», что приведёт к снижению рейтинга веб-сайта. Вот здесь-то пригодится свойство CSS font- weight .
Стандарт приводит несколько вариантов его записи. Интересная особенность - веб-программист сам может выбрать насколько плотным будет текст. Но обо всём по порядку.
Стандартные значения насыщенности шрифта
Спецификация каскадных таблиц стилей рекомендует использовать для задания плотности значения normal и bold . Первое присваивает элементу «нормальное» начертание и обычно используется в случаях, когда требуется убрать жирное написание. Например, следующая запись выключает утолщённое написание в CSS - font- weight: normal . Прибегнув к такой конструкции, можно изменить назначенное по умолчанию жирное написание заголовков в тегах < h1>-< h6> .
Обратная ситуация - необходимо установить повышенную толщину для абзаца текста. В этом случае для соответствующего тега < p> задаётся правило CSS - font- weight bold .
Варианты задания толщины
Последние версии стандарта стилей разрешают пользователю самому назначать степень насыщенности текста. Для этого вместо описанных ранее значений normal и bold используют их числовые эквиваленты.
Плотность текста задаётся относительными значениями в диапазоне от 100 до 900. Шаг равен 100. То есть, чтобы назначить плотность 200, необходимо записать в CSS font- weight : 200 . число 200 и как понять, когда именно его следует применять?
Разобраться с толщиной шрифта поможет следующая таблица-шпаргалка.
Значение свойства | Результат |
Ультратонкое написание. |
|
Тонкое написание. |
|
Светлое написание. |
|
Нормальное написание. Совпадает со значением normal. |
|
Среднее написание. |
|
Полужирное написание. |
|
Жирное написание. Совпадает со значением bold. |
|
Дополнительное утолщение. |
|
Экстражирное написание. |
Как следует из таблицы, следующая запись свойства CSS font- weight : 400 является эквивалентной font- weight: normal . Аналогично обстоит ситуация со значениями 700 и bold . Каким образом прописывать атрибут - нет никакой разницы.
Важное замечание: рассмотренное свойство не всегда работает. Причина - импортируемый шрифт не поддерживает различные степени насыщенности. На практике чаще всего в шрифты встроены только нормальное и жирное начертание символов.
27.11.14 88.7KВ html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.
Теги и атрибуты при роботе со шрифтами html
Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .
Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.
Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:
- color – устанавливает цвет текста;
- size – размер шрифта в условных единицах.
Поддерживается положительное значение атрибута от 1 до 7.
- face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.
Форматируется только тот текст, который расположен между частями парного тега font. Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
- — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
- — размер больше установленного по умолчанию;
- — меньший размер шрифта;
- — наклонный текст (курсив ). Аналогичный ему тег ;
- — текст с подчеркиванием;
— зачеркнутый;- — отображение текста только в нижнем регистре;
- — в верхнем регистре.
Обычный текст
Жирный текст
Жирный текст
Больше обычного
Меньше обычного
Курсив
Курсив
С подчеркиванием
Зачеркнутый
Возможности атрибута style
Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:
1) font-family
– свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя
.
Синтаксис написания:
font-family: имя шрифта [, имя шрифта[, ...]]
2) font-size
– задается размер от 1 до 7. Это один из основных способов того, как в html
можно увеличить шрифт.
Синтаксис написания:
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Размер шрифта можно также задать:
- В пикселях;
- В абсолютном значении (xx-small, x-small, small, medium, large );
- В процентах;
- В пунктах (pt ).
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt
3) font-style – устанавливает стиль написания шрифта. Синтаксис:
font-style: normal | italic | oblique | inherit
Значения:
- normal –нормальное написание;
- italic – курсив;
- oblique – шрифт с наклоном вправо;
- inherit – наследует написание родительского элемента.
Пример того, как поменять шрифт в html с помощью этого свойства:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:
font-variant: normal | small-caps | inherit
Пример того, как изменить шрифт в html этим свойством:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Значения:
- bold – устанавливает полужирный шрифт html;
- bolder – жирнее относительно normal;
- lighter –менее насыщенное относительно normal;
- normal – нормальное написание;
- 100-900 – задается толщина шрифта в числовом эквиваленте.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
Свойство font и цвет шрифта html
Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :
font: font-size font-family | inherit
Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:
- caption – для кнопок;
- icon – для иконок;
- menu – меню;
- message-box –для диалоговых окон;
- small-caption – для небольших элементов управления;
- status-bar – шрифт строки состояния.
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px bold "Times New Roman", Times, serif
Свойствами CSS можно задавать разные шрифты разным элементам веб-страницы, а также указать их начертание, размер, цвет и другие параметры.
Рассмотрим доступные свойства.
font-family
Позволяет определить, каким шрифтом будет написан текст. Для группировки шрифтов в CSS используется два типа имён: generic-family и family-name .
generic-family содержит пять базовых семейств шрифтов, которые можно найти практически на любом компьютере.
- sans-serif - шрифты без засечек. Написанный ими текст воспринимается лучше других.
- serif - шрифты с засечками.
- monospace - шрифты, символы которых имеют фиксированную ширину. Их принято использовать для отображения программного кода.
- cursive - рукописные шрифты.
- fantasy - декоративные (художественные) шрифты.
family-name определяет не семейство, а один шрифт: “Arial Black”, Verdana.
В качестве значений свойства font-family семейства и шрифты перечисляются через запятую. Браузер определяет, установлен ли на ПК пользователя первый в списке шрифт, и если да, то отображает текст им, если нет - переходит к следующему и т. д. Если имя шрифта содержит спецсимволы или состоит из нескольких слов (содержит пробел), то его надо брать в кавычки.
H1 {font-family: Arial, sans-serif;} h2 { font-family: "Times New Roman", serif; }
font-style
Задаёт курсивное (значение italic ), наклонное (oblique ) или стандартное (normal ) начертание текста.
Текст с наклонным начертанием.
Курсивный текст.
Обычное начертание текста.
Создаёт такую страницу:
font-size
Важное свойство, которое определяет размер шрифта. Его можно задавать разными способами.
- Пиксели (px). Используются довольно часто, потому что позволяют указать размер максимально точно. По умолчанию браузер отображает текст размером 16 пикселей.
P { font-size: 12px; }
Обратите внимание: между числом и единицами измерения пробела быть не должно.
- Проценты (%). Высчитываются от размера шрифта родительского элемента. Если у родителя он установлен по умолчанию, то можно вспомнить про 16 пикселей и принять их за 100%.
P { font-size: 120%; }
- Пункты (pt). Тоже используются очень часто. Более того, когда вы выбираете число, выставляя размер шрифта в текстовых редакторах (Word, Блокнот, Notepad и т. д.), то также используете пункты.
P { font-size: 15pt; }
- Относительная высота шрифта (em ). Высота шрифта родителя принимается за единицу, и относительно него устанавливается высота шрифта текущего элемента.
P { font-size: 1.2em; }
- Константы . Считается, что значения xx-small , x-small , small , medium , large , x-large , xx-large (от меньшего к большему) задают абсолютный размер шрифта, хотя на самом деле при их использовании размер всё равно будет зависеть от настроек операционной системы и браузера. Есть также и относительные константы: smaller (меньший) и larger (больший), которые уменьшают или увеличивают шрифт относительно элемента-родителя.
P { font-size: x-large; }
- Другие единицы измерения. Для установки шрифта можно использовать всё, что доступно в CSS: миллиметры (mm ), сантиметры (cm ), дюймы (in ), пики (pc, 1 pc = 12 pt ), размер символа x (ex ).
P { font-size: 1.5pc; }
font-variant
Предлагает два значения:
- small-caps . Строчные буквы меняются на прописные малого размера.
- normal . Обычный текст.
Чтобы понять, разницу лучше один раз увидеть:
H1 { font-variant: small-caps; } h2 { font-variant: normal; }
font-weight
Влияет на насыщенность (жирность) шрифта. Значения могут быть такими:
- Числа от 100 до 900 с шагом в сотню. С их помощью можно задать жирность точнее всего. Насыщенность нормального шрифта, который вы обычно видите на страницах, равна значению 400, полужирного - 700. Проблема в том, что многие браузеры не поддерживают весь этот ассортимент, и поэтому использование числовых значений часто бывает бессмысленным.
- normal . Обычный шрифт.
- bold . Устанавливает полужирное начертание.
Div { font-weight: bold; }
- bolder и lighter. Делает шрифт соответственно жирнее или тоньше шрифта текста родителя.
color
Определяет цвет шрифта. Может задаваться следующими способами
- По названию. Используются зарезервированные слова, обозначающие имена цветов (например, blue - синий, yellow - жёлтый). Самый простой, но вместе с тем и самый ограниченный метод, потому что поддерживает только 140 цветов, хотя обычно и их хватает.
P { color: red; }
- По шестнадцатеричному коду (HEX). Шестнадцатеричная система счисления включает в себя 16 цифр, последние шесть из которых обозначаются буквами латинского алфавита от A до F, причём десятичное число 255 в этой системе записывается как FF. Как известно, все цвета создаются путём смешивания всего трёх: красного, зелёного и синего. Степень присутствия каждого из них и задаётся числами от 0 до 255, записанными в шестнадцатеричной системе. Перед числом ставится символ «решётка (# ). Белый цвет - #000000 , чёрный - #ffffff .
Пример ниже задаёт абзацу серый цвет:
P { color: #808080; }
- В системе RGB. Всё те же красный, зелёный и синий (red, green, blue), но задающиеся уже числами от 0 до 255 через запятую. Присутствие каждого из трёх цветов можно обозначать и в процентах. Тогда 100% будет соответствовать числу 255.
A {color: rgb(0,128,201);}
- RGBA. Всё, как в RGB, только в конце прибавляется ещё одно число от 0 до 1 - альфа-канал, задающий тексту прозрачность.
A {color: rgba(0,128,201,0.5);}
- HSL. Значение в этом формате задаётся тремя параметрами через запятую.
1. H (hue - оттенок). Определяется в градусах от 0 до 359° в зависимости от цвета на цветовом круге (рисунок ниже).
2. S (Saturate - оттенок). Указывается в процентах. Понятно, что от 0 до 100%, и понятно, что чем больше процент, тем насыщеннее цвет.
3. L (lightness - яркость). Так же, как и насыщенность, устанавливается в процентах.
A {color: hsl(0,100%,100%);}
- HSLA. То же, что и HSL, но с добавлением альфа-канала (как RGBA).
A {color: hsla(0,100%,100%,0.7);}
font
Позволяет объединить все свойства шрифта в одной строке и может тем самым сильно сократить код. Имеет следующую структуру:
Font: font-style font-variant font-weight font-size/line-height font-family
Свойства должны записываться именно в такой последовательности (чтобы не задавать значение, его можно просто пропустить).
Вот пример:
Div {font: oblique small-caps 12pt/1.2 Arial, sans-serif;}
В этой главе:
Некоторые сайты привлекают пользователей не анимацией, не картинками или фотографиями, не видео-роликами, а исключительно своим текстовым содержимым. Текст - это неотъемлемое содержимое многих популярных сайтов, в прошлой главе мы рассмотрели CSS свойства, которые позволяют изменить цвет текста, добавить к нему тень, выровнять его и добавить к нему подчеркивание, надчеркивание или вовсе его зачеркнуть. В этой главе будет рассмотрено как изменить шрифт текста, какой можно выбрать для него стиль и напоследок мы рассмотрим, как поменять размер текста, установленный по умолчанию.
Разница между семействами шрифтов Sans-serif и Serif
Семейства шрифтов в CSS
В CSS шрифты разделены на семейства, каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов:
- sans-serif - шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
- serif - семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки - декоративные штрихи и черточки по краям букв.
- monospace - семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
- cursive - шрифты, имитирующие рукописный текст.
- fantasy - художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.
Приветствую всех читателей данной статьи и подписчиков моего блога! Сегодняшнюю публикацию я хочу посвятить теме, без знаний которой ваши интернет-ресурсы не будут читабельными и привлекательными: «Как в html задать шрифт». Сама по себе тема является легкой, и я уверен, что вы быстро ее освоите.
Однако не следует забывать, что веб-языки богаты на всевозможные инструменты оформления шрифтов, которые в идеале необходимо знать. После прочтения статьи вы уверенно овладеете форматированием текста, научитесь задавать различные стили, виды начертаний и украшений шрифтов, а также изменять размер и цвет как предложений, так и отдельных букв. Приступим же!
Шрифты бывают разные
Основная масса вывесок, прессы и литературы, сайтов и других сервисов используют стандартные шрифты. Хоть они и удобные, однако уже давно наскучили и не цепляют глаз. Именно поэтому многие дизайнеры несколько изменяют вид оформления или вовсе создают новые стили. Наиболее известными и влиятельными шрифтами считаются:
- Helvetica;
- Futura;
- Garamond;
- Bodoni;
- Bembo;
- Rockwell;
- Times New Roman.
Их главные отличия состоят в отношении к определенным семействам. Существуют антиквенные (с засечками), рубленные, декоративные, курсивные и моноширинные семейства.
Также хочу подчеркнуть, что существует 5 единиц размерностей шрифтов.
Начнем с языка html и его «творческих способностей»
Название первого заголовка
Подзаголовок с красной буквы!
Здесь расположен первый абзац текущего примера. Для наглядности эти слова будут написаны курсивом.
Напомню, что атрибут align = « center» задает отображение текста по центру.
А теперь пришел час css хвастаться своими умениями
Несмотря на целый набор разнообразных тегов, предусмотренных html, css является более удобным и гибким инструментом для оформления внешнего вида шрифтов.
Основные свойства, применяемые для форматирования контента, это font и его составляющие: text-decoration .
Сначала разберем font . Это универсальный параметр, благодаря которому одновременно можно задать несколько значений. К тому же каждый параметр оперирует своими ключевыми словами.
Название свойства | Ключевые слова |
font-family | Можно устанавливать как стандартные семейства шрифтов:
· без засечек (sans-serif); · антиквенные (serif); · декоративные (fantasy); · курсивные (cursive); · моноширинные (monospace), Так и стандартные существующие стили (Arial, Calibri и т.д.). |
font-size | Для установки абсолютной размерности символов используются обозначения: xx-small, x-small, small, medium, large, x-large, xx-large. Также можно задать уникальное значение. |
font-weight | Отвечает за насыщенность текстового начертания. Изменяется в диапазоне или задается при помощи слов normal, bold, lighter или bolder. |
font-variant | Задает представление буквам, используя ключевые слова: small-caps, normal или inherit. |
font-style | Устанавливает обычное (normal), наклоненное (oblique), курсивное (italic) начертание или наследует родителя (inherit). |
font-stretch | Указывает плотность расположения букв. Можно указать такие значения: ultra-condensed, ultra-expanded, extra-condensed, extra-expanded, semi-condensed, semi-expanded, normal, expanded, condensed и inherit. |
Свойство text-decoration помогает украсить текст дополнительными элементами, такими как подчеркивание (underline ), зачеркивание (line-through ), надчеркивание (overline ), а также наследовать параметры родителя (inherit ) или отменить все оформление (none ).
А теперь настало время для второго примера. Я взял предыдущий код и оформил его при помощи средств css. Так, заголовок был оформлен с тенью (при помощи свойства text- shadow ) и с контуром вокруг (border- color ). При этом одно слово я сделал крупнее. Также мне захотелось использовать параметр opacity для задания прозрачности подзаголовку.
Название первого заголовка
Полупрозрачный подзаголовок!
Здесь расположен первый абзац текущего примера. Для наглядности эти слова будут написаны курсивом.