Как задать шрифт в css для всего сайта

Размер шрифта в CSS а также управление форматированием текста

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

Стиль шрифта в CSS.

Для того чтобы нам задать стиль шрифта в CSS нам нужно воспользоваться атрибутом для стиля font-family и для него задать один из стиля шрифтов. Сейчас большинство людей используют при создании сайтов только безопасные шрифты. Безопасными называются шрифты которые есть на операционной среде виндовс (самой популярной операционке) по умолчанию и соответственно ваш текст будет всегда отображаться правильно. Давайте я перечислю шрифты, которые вы можете смело использовать на своем сайте или блоге. К таким относятся шрифты:

Arial Black
Arial
Comic Sans MS
Courier New
Georgia
Impact
Lucida Console
Lucida Sans Unicode
Palatino Linotype
Tahoma
Times New Roman
Trebuchet MS
Verdana

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

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

После того как мы применим эти параметры для нашего текста вы сможете увидеть результат работы.

После применения параметров стилей.

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

Более подробно о том как задавать стили для целого ряда тегов рассказано раньше статья CSS селекторы. А также как подключить файл стилей к HTML файлу прочитав статью задать стиль для текста на странице у вас не вызовет затруднений.

Также вы можете задать для страницы не один а несколько вариантов шрифтов. Для этого вам нужно просто указать все нужные шрифты через запятую.

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

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

Размер шрифта в CSS.

Давайте теперь зададим размер шрифта на нашей странице и для этого нам нужно будет использовать команду font-size и вот как это выглядит на практике и я расскажу более подробно о применении данного параметра. Давайте зададим для нашего текста размер 18 пикселей.

Теперь давайте посмотрим каким будет после этого текст.

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

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

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

Для того чтобы наш текст нам выделить текст жирным шрифтом нам нужно воспользоваться параметром font-weight у которого есть параметры bold и normal которые соответствуют полужирному и обычному тексту соответственно. Вот как это выглядит на практике.

А теперь давайте посмотрим на результат применения данного параметра.

Если мы зададим параметр normal то наш текст будет обычной жирности. Также вы можете задавать жирность с помощью специального параметра в цифровом виде где нормальной жирности соответствует цифра 400 для полужирного 700. Все промежуточные цифры увеличивают или уменьшают значение жирности.

Для того чтобы выделить текст курсивом нам нужно задать свойство font-style:italic и вы выделите текст курсивом. Код для файла выглядит так:

И теперь посмотрим результат.

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

Сейчас мы рассмотрим такой важный момент как декорирование текста средствами CSS все эти функции очень часто применяются при оформлении отображения ссылок на сайте. Декорирование текста в CSS осуществляется с помощью команды text-decoration в которой есть четыре свойства underline-подчеркивание, overline-верхнее подчеркивание, line-throudh-зачеркнутый текст, none отсутствие какого-либо форматирования.

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

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

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

Очень важно для дизайна знать про выравнивание текста в CSS который позволит вам выровнять текст на странице по таким параметрам как выравнивание по ширине, по левому и правому краю. Для этого вам нужно прописать для тегов параметр text-align и выбрать для него один из параметров left (выравнивание слева), center (выравнивание по центру) и right (выравнивание справа).

Также вы можете задать красную строку для абзаца. После того как вы зададите параметр у вас после каждого абзаца будет отступ определенного размера. Для этого мы задаем параметр text-indent и через двоеточие вам нужно указать нужный размер для отступа. Сейчас мы сделаем отступ первой буквы в абзаце в двадцать пикселей.

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

Как установить шрифт на сайт и подключить его в css правильно?

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

Как подключить шрифт к сайту на WordPress?

Для начала скачаем какой-нибудь интересный шрифт, я скачала вот такой расписной под названием Cordeballet .

Далее необходимо добавить свой шрифт на сайт . Сделать это очень просто, и для этого нужно:

CSS — Урок 6. Свойства — шрифты

Для задания параметров шрифтов в CSS используется свойство font.

Это свойство css задает гарнитуру шрифта. Все шрифты можно условно разделить на несколько групп:

• Serif — шрифты с засечками, например, Times New Roman.
• Sans-serif — шрифты рубленные, без засечек, например, Arial.
• Monospace — моноширинные шрифты, например, Courier New.
• Cursive — курсивные шрифты, например, Calisto MT.
• Fantasy — декоративные шрифты, например, Torhok.

Так вот в качестве значения свойства font-family можно указать шрифт и группу шрифтов. Например:

Теперь весь текст страницы будет написан шрифтом Verdana, но если на компьютере пользователя такого шрифта не окажется, то будет использоваться любой другой из группы sans-serif. То есть будет подобран шрифт наиболее близкий ему по виду, и внешний вид страницы будет не очень отличаться от задуманного.

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

Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Пусть у нас есть html-страница с тремя параграфами, зададим каждому уникальный идентификатор:

Шрифты для сайта в CSS

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

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

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

Дело в том, что есть такое явление, как кроссбраузерность, то есть возможность какого либо элемента, одинаково отображаться во всех имеющихся в интернете браузерах.

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

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

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

Конечно, такое положение со шрифтами нельзя назвать нормальным, и оно не осталось без внимания умных ребят из команды Google.

Ими был создан сервис, или библиотека, «Google Fonts», который изменил ситуацию в лучшую сторону, но о нём в конце статьи.

Там же покажу ещё несколько аналогичных сервисов, с которых можно будет так-же скачать шрифты и установить их на свой сайт.

А пока я представлю список тех шрифтов, которые входят в наиболее распространённые ОС, а значит в большинстве случаев отобразятся так как положено.

1. Семейство sans-serif — шрифты без засечек, с прямыми чётко прописанными контурами.

а) Arial	Шрифты для сайта
б) Arial Black	Шрифты для сайта
в) Tahoma	Шрифты для сайта
г) Verdana	Шрифты для сайта
д) Lucida Sans Unicode	Шрифты для сайта
е) Trebuchet MS	Шрифты для сайта
ж) MS Sans Serif	Шрифты для сайта
з) Impact	Шрифты для сайта
е) Century Gothic	Шрифты для сайта

2. Семейство serif — шрифты с засечками.

а) Times New Roman	Шрифты для сайта
б) Georgia	Шрифты для сайта
в) Palatino Linotype	Шрифты для сайта
г) MS Serif	Шрифты для сайта
д) Sylfaen	Шрифты для сайта
е) Garamond	Шрифты для сайта
ж) Century	Шрифты для сайта

3. Семейство monospace — моноширинные шрифты.

а) Courier New	Шрифты для сайта
б) Lucida Console	Шрифты для сайта
в) Consolas	Шрифты для сайта
г) Courier New	Шрифты для сайта

4. Семейство cursive .

а) Сomic Sans MS	Шрифты для сайта
б) Monotype Corsiva	Шрифты для сайта
в) Mistral	Шрифты для сайта

Полный список свойств и значений css для шрифтов и текста, можно посмотреть в шпаргалках, а здесь рассмотрим основные.

Сначала посмотрим, как задаются шрифты в таблицах стилей.

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

, если шрифты будут задаваться для заголовков или абзацев.

Задаются шрифты при помощи свойства CSS font-family , а в значении указывается название шрифта.

Задать шрифт и его оформление можно как в файле style.css, так и непосредственно в теге элемента.

В файле style.css задаётся общий шрифт для всех страниц сайта, а в теге, для выделения небольших участков контента.

Как я уже говорил, после названия шрифта, через пробел, указывается семейство шрифта.

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

И ещё одно правило. Если название шрифта состоит из нескольких слов, то при написании в стиле, его нужно заключать в кавычки, если слово одно – без кавычек.

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

Размер и цвет шрифта

Рассмотрим, как в CSS задаётся размер и цвет шрифта. Размер шрифта задаётся в пикселях (px), реже в процентах (%), и совсем редко в единицах(em) и пунктах (pt).

Базовый размер шрифта составляет: 16px, 100%, 1em, 12pt. Значит, если нам потребуется увеличить, или уменьшить шрифт, мы будем двигаться от этих данных в сторону увеличения, или уменьшения.

Свойство для задания размера шрифта называется font-size , и давайте установим его для всех абзацев, допустим, в 18px.

Так же можно задать это свойство заголовку h1 , в том случае, если размер заголовка нужно ещё увеличить

Цвет шрифта задаётся свойством color

Можно так же задать размер и цвет какому либо слову или предложению расположенному внутри абзаца, используя тег и атрибут style

Тег вводит в html код встроенные стили. Чуть ниже рассмотрим, как то же самое делается при помощи классов.

Теперь посмотрим, как отобразит этот код браузер.

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

Главное их знать, чтоб в дальнейшем, если придётся работать с каким либо кодом, иметь представление, что за значение указано в свойстве font-size .

Жирный и курсивный шрифт

Толщина шрифта задаётся свойством font-weight , которое принимает следующие значения:

1. normal — нормальный;
2. bold — полужирный;
3. bolder — жирнее родителя;
4. lighter — тоньше родителя;
5. от 100 до 900 — цифровое значение, не обладает кроссбраузерностью;

Курсив задаётся свойством font-style , принимающим значение – italic .

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

Растянутый и сжатый шрифт

У шрифта можно изменить расстояние между символами и словами.

И хотя эти свойства относится уже к тексту, а не к шрифту, я хочу всё-же их здесь показать.

Для изменения расстояния между символами применяется свойство css letter-spacing

Для изменения расстояния между словами применяется свойство word-spacing

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

Шрифты можно сжать и растянуть не только по горизонтали, но и по вертикали.

Дело в том, что по умолчанию всем шрифтам задано расстояние между строк, и им можно манипулировать.

Для этого в CSS имеется свойство line-height . Увеличивая или уменьшая значение этого свойства, получаем требуемый результат.

Расстояние между строк
Расстояние между строк
Расстояние между строк

Все свойства CSS для шрифтов и текста можно найти в Шпаргалках CSS, все свойства

А теперь, как и было обещано, познакомимся, и научимся пользоваться сервисом Google Fonts

Представляю скриншот Главной страницы сервиса.

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

Что-бы вам было проще освоиться, я покажу пункты интерфейса с описанием функций, которые в них заключены.

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

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

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

Внизу появится чёрная полоса Family Selected. Щёлкаем по ней — открывается окно с кодом.

По умолчанию открывается вкладка STANDART в которой дан код для внедрения через файл head вашего сайта. Например:

Копируете его и вставляете в файл head, туда, где у вас прописаны все теги

Если с этой вкладки сервиса перейти на вкладку @IMPORT, то вы получите код для файла style.css вашего сайта. Например:

Этот код вставляется в самое начало файла style.css, перед самым первым селектором.

Только @import работает дольше чем link, что увеличивает время загрузки страницы.

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

Теперь вам остаётся только оформить нужный элемент указанием шрифта так, как я уже показывал выше. Но, на всякий случай, ещё раз

Всё, шрифт, как говориться, внедрён.

Можно посмотреть, как он отображается, хотя особо переживать по этому поводу не стоит.

Сервис выложит шрифт на сайт именно в том виде, и с тем эффектом, который Вы выбрали. На всех компьютерах, которые откроют Вашу страницу.

А теперь посмотрим, как внедряется шрифт из библиотеки Google Fonts, на сайт управляющийся CMS WordPress.

Сделать это можно прямо из панели управления (одно из неоспоримых достоинств этой CMS).

Заходим в Панель управления > Внешний вид > Редактор, и находим в php-файлах темы, файл с тегом head .

В теме TwentyTen — это файл header.php . В коде этого файла, после тега обычно расположен блок с подключающими тегами

Вот в этом блоке и нужно вставить код, из вкладки STANDART.

Если же внедрять через файл стилей, то берём код из вкладки @IMPORT и вставляем в самое начало файла style.css

Обновляем файл — шрифт внедрён, и в дальнейшем — на Ваше усмотрение.

Если Вы хотите, чтобы все определённые заголовки Вашего сайта, отображались данным шрифтом, то нужно в файле style.css , в том же редакторе, найти селектор заголовков, допустим h1<> , и вставить в него название и семейство шрифта.

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

Если же Вам захочется целую отдельную статью отобразить таким шрифтом, то нет проблем — заключайте всю статью в этот span или лучше div, и вся статья будет отображена этим шрифтом.

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

fontstorage.com — Большая библиотека шрифтов на многих языках.

www.xfont.ru — Самая большая библиотека русскоязычных шрифтов.

Подробнее, как поменять шрифты в шаблоне WordPress TwentyTen, можно посмотреть в статье Редактируем тему оформления

Желаю творческих успехов.

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

Перемена

Петя всего-навсего сказал «Привет!», а Люся мысленно сыграла свадьбу и родила троих детей.

Похожие публикации:

1. Как отключить звонки в whatsapp
2. Как открыть html файл в python
3. Как отменить обновление на айпаде
4. Как очистить ipad перед продажей

Как изменить шрифт?

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом и вы скоро в этом убедитесь. А теперь давайте рассмотрим несколько новых тегов:

. и . — выделяют текст полужирным шрифтом.

^. — выводит текст в верхнем индексе, например E = mc 2 .

_. — выводит текст в нижнем индексе, например H₂SO₄.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

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

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги и , подчеркивающие текст, а также тег , отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align , возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style , причем его допустимо указывать внутри любых тегов . Общий синтаксис следующий:

Пример изменения стилей шрифтов

      
Жирный шрифт. Курсив.
 
Жирный курсив.
 
H2SO4 - формула серной кислоты написанная курсивом.
 
Подчеркнутый параграф текста.
 
Обычный текст, зачеркнутый жирный. 
  

Результат в браузере

Жирный шрифт. Курсив.

Жирный курсив.

H₂SO₄ — формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Теперь хотелось бы сделать одно пояснение по поводу атрибута style . Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style . Его общий синтаксис следующий:

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег или что делать, когда нет нужных тегов

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

Итак, знакомьтесь — . . Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style . Именно благодаря этому атрибуту, а вернее его разным значениям, у появляются те или иные свойства. Вот так, а теперь изучаем пример.

Пример использования тега SPAN

      
Обычный текст без изменений.
 
Еще обычный текст. Подчеркнутый. Зачеркнутый. 
  

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

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

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

Шрифты	Семейство
‘Comic Sans MS’	cursive (рукописные)
Courier	monospace (моноширинные)
Arial, Helvetica, Verdana, Tahoma	sans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamond	serif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style , который можно применить внутри любого тега . Общий синтаксис указания следующий:

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге . А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег и примените атрибут к нему.

Пример изменения имени шрифтов

      
Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.
 
Это Comic Sans MS или любой cursive.
 
Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace. 
  

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

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

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

• pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
• px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
• % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега . Общий синтаксис такой:

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге . А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег и примените атрибут к нему.

Пример изменения размера шрифтов

      
Этот размер шрифта составляет 90% от размера в браузере по умолчанию.
 
Этот размер составляет 90% уже от размера в теге BODY.
 
Размер шрифта заголовка составляет 120% от размера в BODY.
 
Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов. 
  

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

 
 Текст параграфа. 

 
  Текст параграфа.  

Или вообще вот так.

 
Текст параграфа.
 

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

 
Текст параграфа.
 

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.

1. Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
2. Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
3. Напишите один параграф в начале статьи и по два в каждом разделе.
4. Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
5. Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
6. Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
7. Напишите в последнем параграфе формулу спирта: C₂H₅OH.

Разделы сайта

• Как сделать сайт
  Самому и бесплатно
• Учебник HTML
  Для начинающих
• Учебник CSS
  Для новичков
• Справочники
  По HTML и CSS
• Примеры
  HTML и CSS
• Ссылки
  Полезные сайты для вебмастеров
• Инструментарий
  Программы для создания сайтов

Учебник HTML

• Введение
• Что такое HTML?
• Теги и синтаксис HTML
• Атрибуты HTML-тегов
• Общие и текст
• Структура HTML-документа
• Параграфы и заголовки
• Как изменить шрифт?
• Меняем цвет текста и фона
• Выравнивание содержимого
• Цитаты и обрыв строки
• Что такое спецсимволы HTML?
• Горизонтальные линии
• Группирование элементов
• Комментарии в HTML
• Ссылки
• Cсылки и их разновидности
• Меняем цвета ссылок
• Ссылки на электронную почту
• Якоря — создаем закладки
• Изображения
• Изображения
• Изображения для фонов
• Изображения — ссылки
• Таблицы
• Таблицы
• Границы, рамки и отступы HTML-таблиц
• Объединение ячеек таблицы
• Вложенные таблицы
• Списки
• Нумерованные и маркированные списки
• Метатеги
• Метатеги и их типы

Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

Как задать шрифт в css для всего сайта

Как задать один Font-family всем элементам на странице?

Я пытался написать body , но не работает. На htmlbook написано, что font-family наследуется. Но у меня что — то не получается.

Всё оказалось просто, в проекте был подключен reset.css, в нем для всех элементов было установлено font:inherit; я закомментировал эту строку и всё стало ок.

Это делать не следовало. Устанавливая для всех элементов значение «inherit» для свойства «font» вы сможете наследовать установленный шрифт. Процедура такая:

Устанавливаем для всех элементов inherit

Ниже для body задаем нужное значение

Причина, по которой не получалось установить наследуемый шрифт в вашем случае, заключается в разном «весе» значения «font» и «font-family». В данном случае есть 2 решения:

1) В reset.css вместо

2) Не трогаем reset.css, но тогда в «body» задаем параметры так же для «font».

Предпочтительнее первый вариант, иначе в каждом элементе, где понадобится другой стиль, для шрифта нужно будет переопределять «font» целиком вместо «font-size» скажем или же использовать » !important «.

Задать разновидность шрифта для всего сайта

Сообщение было отмечено mrtoxas как решение

Решение

Как для всего сайта задать разновидность шрифта ‘font-family: sans-serif’?

Добавлено через 15 минут
Разобрался:

Задать кодировку для всего сайта
Есть сайт пациет, кодировка в юникоде, я его качнул у меня всё получилось в другой кодировке.

Установка шрифта для всего приложения
Доброго времени суток. Устанавливаю шрифт для отдельного контрола так: hFont = CreateFont(20, 7.

Задать размер шрифта для Label
Всем привет! столкнулся с такой проблемой, нужно добавлять label и button на форму . добавлять.

Как задать стиль шрифта для Label в коде?
как задать стиль шрифта для Label в коде. пишу :Form1.LStart.Font.Style := ‘Sylfaen’, выдает.

Как задать фон и цвет шрифта для значений на некоторых промежутках?
5. Задайте формат ячейки С6 так, чтобы числа из отрезка отображались в ней зеленым, из интервала.

Задать стиль текста для всего проекта C#
VS 2010 С#. Можно ли задать определённый шрифт для всех компонентов на форме в проекте?

Настройки компонентов для всего сайта или для отдельного пункта меню
Здравствуйте.Подскажите пожалуйста,у меня на сайте есть меню.Для каждого пункта меню свои настройки.

Извлечь cookie установленные для всего сайта и для отдельной страницы с одним именем
Столкнулся со следующей проблемой: На одной странице кука с именем "email" устанавливается видимой.

PR для каждой стрн. Тиц для всего сайта
Здравствуйте. У меня немножко глупый вопрос но всё же интересен. Как мы знаем PR определяется.

Не работает увеличение шрифта в версии сайта для слабовидящих? Шаблон Accessibility
На сайте установлен шаблон Accessibility (Версия сайта для слабовидящих). При нажатии на кнопки.

Использование собственного любого шрифта на своем веб-сайте CSS3

Пользовательские шрифты являются одним из самых привлекательных аспектов CSS3 для дизайнеров. С новым правилом @font-face, вы можете добавить любой шрифт на ваш сайт или веб-страницу, независимо от того, установлен ли этот шрифт у пользователя или нет. Конечно, можно всегда воспользоваться Google Fonts и т.д., но в данной статье речь пойдет об использовании собственного уникального или купленного шрифта.

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

В этом коротком уроке мы покажем основы применения своего шрифта на веб-сайте при помощи @font-face CSS3.

Загрузите шрифт

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

Далее, загрузите выбранный шрифт на вашего сервера. Вы можете хранить его в специальной папке “Шрифты” для простоты и организации, но это необязательно.

Не забудьте включить файлы для любых вариантов шрифта, который вы планируете использовать, например полужирный шрифт или курсив. Вы можете использовать EOT (Embedded OpenType) файлы для Internet Explorer и либо OTF (OpenType) или TTF (TrueType) для остальных. (Дополнительные опции включают WOFF (Web Open формат шрифта) и SVG (Scalable Vector Graphics), но мы будем придерживаться наиболее распространенных типов)

Запишите URL, где файлы шрифтов хранятся на сервере.

Добавляем font-face в коде CSS

Откройте HTML или CSS файл страницы, над которой вы работаете. Добавляем font-face код:

Вначале, укажем имя нашего шрифта:

Далее, укажем месторасположение на сервере для OET шрифта:

Аналогично укажем месторасположение OTF и TTF шрифтов:

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

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

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

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

Применение шрифта для отдельных элементов страницы

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

Указание вариантов шрифтов

Если, например, вы хотите использовать жирную версию шрифта, просто добавьте другой font-face, URL файла шрифта и декларацию “шрифт: жирный;”:

Все очень просто! Теперь вы смело можете “обновить” дизайн своего веб-сайта, применив несколько красивых персональных шрифтов. Если вам помог этот урок – напишите в комментариях внизу, на каком сайте вы его применили и как он выглядит.

«Как правильно установить любые шрифты на сайт и где их найти?»

При оформлении созданного сайта необходимо уделить должное внимание выбору шрифтов, поскольку люди посещают страницы с целью получить информацию именно через прочтение, поэтому нужно сделать этот процесс максимально комфортным. Разумным решением будет использовать два основных шрифта при оформлении сайта. Один – для заголовков, а другой – для основного текста. Таким образом, посетитель будет легко различать структуру контента, а сам сайт будет более целостным. Для заголовка, например, можно использовать шрифт Roboto Black, а для основного текста – Roboto Light или другие варианты. Важно знать, что шрифт, который вы установили на своем компьютере, не обязательно правильно отрисуется у других. Если такой же шрифт не установлен у читателя, то его браузер отобразит либо альтернативу вашему шрифту, либо значение по умолчанию.
Кстати, эта фраза для демонстрации всех кирилических шрифтов выбрана не случайно. Именно она содержит сразу весь русский алфавит и предоставляет возможным оценить отрисовку каждой буквы в контексте одного предложения.

Как установить сразу несколько шрифтов

Очередь шрифтов – указание в стилях сайта не только, например, «Roboto», но и ряд других, как вариант: «Roboto, Serif, Arial». В таком случае, браузер первым попытается использовать шрифт Roboto, если он не установлен на компьютере пользователя, то следующим будет Serif, за ним Arial, а затем шрифт, который система сама обозначила по умолчанию. Пример реализации, фрагмент из style.css моего сайта:

Как видно из кода, основным шрифтом является Open Sans Light, в случае возникновения с ним каких-либо проблем, браузер отобразит стандартный serif, который есть в каждой сборке Windows. Зачем это нужно, если система сама поставит шрифт по умолчанию? Затем, что стандартный serif визуально гораздо больше похож на мой кастомный Open Sans, и в целом, потери отображения контента будут не такими большими, как в случае с отрисовкой совершенно другим шрифтом.

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

Пример из таблицы стилей моего сайта:

После указания в style.css прямой ссылки на файл шрифта, остаётся лишь применить его, указав в том же файле стилей font-family для всего сайта или отдельного элемента. В качестве примера, применим ко всему тексту на сайте:

Где взять красивые шрифты для сайта?

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

AllFont — cервис, которым я пользуюсь лично. Это огромная библиотека шрифтов, в том числе, что немало важно, и кирилических. Сайт удобен тем, что Вам вовсе не обязательно скачивать шрифт для того, чтобы узнать как он будет выглядеть в работе — достаточно лишь ввести желаемую фразу в качестве примера, и Вы сразу получите представление о шрифте. Так же на странице каждого шрифта дополнительно есть изображение со всеми символами и буквами русского и английского алфавита, цифрами и самыми распространенными спецсимволами.

Желаю Вам удачи в оформлении

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

Похожие публикации:

1. Как открыть css код страницы
2. Как отменить жирность в html css
3. Что значит basic
4. Что можно сделать с arduino

Шрифты и работа с ними — Основы верстки контента

Страшным сном дизайнера и верстальщика является фраза заказчика «Поиграйся со шрифтами». Многие эту фразу слышали, но а как же поиграть со шрифтами? CSS предоставляет много правил для стилизации шрифтов. С некоторыми из таких свойств вы уже знакомы — это свойство font-weight и font-size .

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

• Семейство шрифтов;
• Стиль шрифта;
• Стиль строчных символов;
• Размер шрифта;
• Межстрочный интервал.

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

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

CSS позволяет указывать шрифты, которые будут использованы на сайте. Для этого используется свойство font-family . Оно принимает список шрифтов, которые могут быть загружены на сайте. Это может быть одно семейство шрифтов или сразу несколько. Если указано несколько шрифтов, то браузер будет считывать их слева направо до первого шрифта, который он сможет использовать. Остальные шрифты будут игнорироваться. Например:

.font  font-family: Georgia, "Times New Roman"; > 

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

• У пользователя в системе установлен шрифт Times New Roman — шрифт применится к странице.
• У пользователя в системе не установлен шрифт Times New Roman — браузер подставит шрифт из основных настроек браузера. Это необходимо для возможности отобразить контент на странице.

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

• Антиква или шрифты с засечками. Такие шрифты чаще всего используются в книгах и новостных сайтах. В CSS обозначается serif .
• Гротеск или шрифты без засечек. Основной тип шрифтов на сайтах. Прямо сейчас вы читаете именно такой шрифт. В CSS обозначается sans-serif .
• Моноширинный шрифт. У этого семейства все символы имеют одинаковую ширину. Вы можете увидеть такой шрифт в терминалах или редакторах кода. В CSS обозначается monospace .

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

.font  font-family: Georgia, "Times New Roman", serif; > 

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

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

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

• .woff/.woff2 — шрифт формата Web Open Font Format. Распространенный формат, который поддерживается большинством современных браузеров.
• .ttf — шрифт формата TrueType. Данный формат был придуман в 80-е года 20 века и сейчас используется для поддержки старых браузеров. Совместим с современными браузерами. Золотая середина форматов.
• .eot — шрифт формата Embedded OpenType. Это наиболее старый формат. Его использование необходимо только в случае поддержки старых браузеров, например, Internet Explorer 6.0. Ситуация редкая, поэтому его использование почти не встречается.

Для установки шрифта используется конструкция @font-face . Она позволяет подключить шрифт в различных расширениях, определить имя и путь к файлу. На примере шрифта Roboto воспользуемся такой конструкцией.

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

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

• font-family — Имя подключаемого шрифта. Именно по нему можно обратиться после подключения.
• src — Путь к файлу со шрифтом.

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

@font-face  font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); > body  font-family: "Roboto Regular", sans-serif; > 

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

@font-face  font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); > @font-face  font-family: "Roboto Bold"; src: url("../fonts/Roboto-Bold.ttf"); > @font-face  font-family: "Roboto Light"; src: url("../fonts/Roboto-Light.ttf"); > body  font-family: "Roboto Regular", sans-serif; > h1  font-family: "Roboto Bold", sans-serif; > h2  font-family: "Roboto Light", sans-serif; > 

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

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

@font-face  font-weight: 400; /* Соответствует значению normal */ font-family: "Roboto"; src: url("../fonts/Roboto-Regular.ttf"); > @font-face  font-weight: 700; /* Соответствует значению bold */ font-family: "Roboto"; src: url("../fonts/Roboto-Bold.ttf"); > @font-face  font-weight: 300; font-family: "Roboto"; src: url("../fonts/Roboto-Light.ttf"); > body  font-family: "Roboto", sans-serif; > h1  font-weight: bold; > h2  font-weight: 300; > 

Пара слов об особенностях использования свойства font-family внутри конструкции @font-face . Указывая имя шрифта, не нужно дополнительно указывать семейство шрифтов. Это делается при указании шрифта у элемента. То есть, вот такая запись является некорректной:

@font-face  /* Приведет к ошибке и шрифт не будет подключен */ font-family: Roboto, sans-serif; > 

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

@font-face  /* В названии нет кавычек */ font-family: Roboto; src: url("../fonts/Roboto-Regular.ttf"); > @font-face  /* В названии кавычки */ font-family: "Hexlet Regular"; src: url("../fonts/hexlet.ttf"); > body  font-family: Roboto, sans-serif; > .logo  font-family: "Hexlet Regular", monospace; > 

Стиль шрифта

Помимо обычного начертания, CSS позволяет задать и другой вариант отображения шрифта — курсивный. Для этого используется свойство font-style , которое может принимать одно из трех значений:

• normal — стандартное значение. Соответствует нормальному отображению шрифта. Именно такой стиль вы читаете прямо сейчас.
• italic — курсивное начертание. Данное начертание имеет наклонные буквы, в отличие от нормального стиля. Вот так выглядит курсивный шрифт.
• oblique — тоже курсивное начертание. Зачастую оно не отличается от значения italic .

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

.italic  font-style: italic; > 

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

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

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

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

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

Капитель устанавливается с помощью свойства font-variant . У него возможны два значения:

• normal — стандартная стилистика строчных символов.
• small-caps — капитель.

p  font-variant: small-caps; > 

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

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

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

p  font-size: 16px; line-height: 1.5; > 

Может показаться, что значения 1.5em и 1.5 будут работать одинаково. Это правда, но только для одного элемента. Сравним вот такие блоки:

 class="news"> Важная новость Текст важной новости  

.news  font-size: 16px; line-height: 1.5; > .news h2  font-size: 18px; > 

При использовании значения 1.5 межстрочный интервал будет высчитан отдельно для блока news и для каждого элемента внутри, в зависимости от его размера шрифта:

• У блока news межстрочный интервал будет равен 16 * 1.5 = 24px
• Заголовок второго уровня получит интервал 18 * 1.5 = 27px

Заменим line-height: 1.5 на line-height: 1.5em :

.news  font-size: 16px; line-height: 1.5em; > .news h2  font-size: 18px; > 

При указании единицы измерения свойство line-height будет посчитано один раз и это значение применится ко всем элементам внутри:

• У блока news межстрочный интервал будет равен 16 * 1.5 = 24px
• Заголовок второго уровня тоже получит интервал в 24px , так как оно будет наследовано от блока news

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

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

• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family

Их можно указывать не только по отдельности, но и все вместе с помощью одного CSS правила font . Шесть разных правил внутри одного! Это может быть удобно, если действительно нужны все значения. При этом вы не обязаны указывать все значения. Единственное ограничение — наличие значений для font-size и font-family . Остальные значения можно не указывать. Укажем значения для всех этих свойств внутри правила font :

p  font: italic small-caps bold 16px/24px Roboto, sans-serif; > 

Важно обратить внимание на запись 16px/24px . Внутри правила font так обозначаются свойства font-size и line-height .

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

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

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

Открыть доступ

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

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях: