Css что такое гарнитура шрифта
Шрифт: размер и гарнитура
Когда таблиц стилей еще не существовало, для задания размера и гарнитуры шрифта применялся тег font. Однако, в данный момент использование данного тега не рекомендуется. Ниже приведены примеры использования данного тега:
Минимальный размер текста
Макс-й размер текста
Helvetica
Arial
Красный
Гораздо удобнее и правильнее для этих целей воспользоваться листом стилей. Во всяком случае, вы будете уверены, что ваш сайт будет правильно отображаться во всех браузерах.
Поскольку, файл CSS является текстовым документом, то, при отсутствии специализированных программ, можно его написать в простом текстовом редакторе, например, в Блокноте.
Как выглядит страница без CSS: Пример №2
Как выглядит страница с CSS: Пример №3
Фрагмент измененного HTML-кода страницы (добавлен только МЕТА-тег, подключающий файл таблицы стилей; в саму же страницу изменения не вносились):
Содержание файла CSS:
Как говорится, почувствуйте разницу! Всего одна строчка файла таблицы стилей мигом изменила весь вид HTML-страницы (если бы сайт содержал десятки, сотни, тысячи страниц, то, все равно, изменения бы отобразились на всех страницах сайта).
Разберем подробнее строку CSS-файла:
«Поиграйте» с различными параметрами значений и посмотрите как мгновенно преображается ваша страница.
При помощи стилей можно делать небольшие «фокусы», которые будут видны пользователям, посещающим ваш сайт, но «незаметны» поисковым системам (по крайней мере, на время написания данного материала). Как известно, поисковики довольно высоко ранжируют текст, заключенный в заголовок первого уровня (тег
HTML-код страницы:
Тот же эффект, но с применением внешнего листа стилей (в вышеприведенный код страницы никаких изменений не вносилось; менялся CSS-файл) Пример №5
Содержание файла CSS:
Нетрудно понять, что лист стилей задал заголовку первого уровня зеленый цвет и установил размер шрифта 130% от основного размера, который был задан в 8pt.
С помощью атрибута font-size (размер шрифта) можно задавать размер шрифта в следующих единицах:
При задании гарнитуры шрифтов (атрибут font-family:), можно задавать любые шрифты, но для подстраховки (на случай, если на компьютере пользователя не окажется нужного шрифта) рекомендуют включать стандартные типы гарнитур:
Цвет шрифта (атрибут color:) можно задавать в шестнадцатиричном виде (#FCD34F), либо английским названием стандартного цвета (red). Следует аккуратно подходить к заданию цвета в шестнадцатиричном виде, т.к. далеко не каждый цвет, заданный подобным образом, будет отображаться одинаково на разных мониторах. Гораздо предпочтительнее пользоваться безопасной палитрой цветов, которая одинаково отображается на всех мониторах.
16 цветов стандарта VGA:
HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.
HTML шрифты. Работаем со шрифтами в HTML: гарнитура, размер, цвет
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы много говорили о том, что информация на сайте должна быть удобной, доступной, читабельной. Мы рассмотрели несколько HTML тэгов, позволяющих изменять структуру отображения текста HTML страницы в браузере. Теперь мы поговорим про работу со шрифтами в HTML. Замечу, что эта информация в большей степени ознакомительная, так как на данный момент для изменения параметров шрифтов в HTML следует использовать CSS.
HTML шрифты: работаем со шрифтами в HTML
В этой записи мы поговорим о том, что мы можем делать со шрифтами средствами HTML, разберемся с HTML тэгами и атрибутами для изменения параметров шрифта в документе. Попробуем самостоятельно изменить размер, цвет и гарнитуру шрифта при помощи специальных тэгов и HTML атрибутов.
Что может делать HTML со шрифтами?
Давайте сразу скажем, что не стоит путать понятие шрифта и текста, хотя зачастую мы подменяем один термин другим. Чтобы разбираться с тем, что мы можем делать со шрифтами в HTML, давайте дадим определение термину шрифт. Шрифт — графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка. В узком типографском смысле шрифтом называется комплект типографских литер, предназначенных для набора текста. Такое определение термину шрифт нам дает Википедия.
Сейчас у нас нет цели глубоко вдаваться в особенности и тонкости создания шрифтов и их назначение, поскольку эти задачи скорее будут интересны больше для дизайнеров и типографов, для целей верстки нам нужно понимать, какие характеристики шрифтов позволяет нам изменять HTML.
В любом HTML документе у шрифта есть три характеристики: гарнитура, цвет и размер. Шрифты в HTML играют очень важную роль. Именно от того, как отображается шрифт в документе зависит его читабельность. На самом деле отображение шрифта на HTML страницах в браузере зависит от операционной системы и, собственно, самого браузера, в котором открыт HTML документ.
Это вызвано тем, что каждая операционная система поддерживает свой собственный набор шрифтов, который любой пользователь может изменять по своему усмотрению. Также любой браузер имеет собственные настройки, в которых указаны шрифты, которые будут использованы по умолчанию. Изменять шрифты в HTML мы можем двумя способами: средствами самого языка HTML и средствами каскадных таблиц стилей.
В данной записи мы поговорим о том, как работать со шрифтами при помощи HTML. На данный момент этот подход считается не совсем правильным из-за того, что есть CSS и именно при помощи CSS консорциум рекомендует оформлять HTML документы. Но знать о том, как можно работать со шрифтами в HTML нужно, поэтому давайте рассмотрим более подробно, что предлагает HTML для изменения: цвета, гарнитуры и размера шрифта
HTML тэги для работы со шрифтами
Второй тэг используется для изменения характеристик шрифта на определенном участке HTML документа. Тэг относится к парным HTML тэгам, а элемент FONT относится к строчным HTML элементам.
HTML атрибуты для работы со шрифтами
Оба тэга для работы со шрифтами в HTML имеют одинаковый набор HTML атрибутов: для них доступны все универсальные HTML атрибуты и атрибуты событий. Также у этих тэгов есть три уникальных атрибута:
Вот такое вот ограничение в творчестве по работе со шрифтами в HTML. Как мы уже говорили ранее, HTML позволяет изменить три характеристики шрифта: гарнитуру, цвет и размер.
Изменяем размер шрифта в HTML
Давайте попрактикуемся в изменение размеров шрифта в HTML. Отметим, что атрибут size может принимать семь значений в виде целых чисел от ноля до семи. Размер шрифта по умолчанию в HTML для любого браузера равен трем. Шрифт, для которого HTML атрибут size имеет значение равное единицы, является самым маленьким, семерки – самым большим. Давайте посмотрим это всё на примере, откройте любой удобный для вас редактор, например бесплатный редактор с подсветкой синтаксиса Notepad++ и создайте документ с кодом:
Свойства шрифтов в CSS
CSS свойства шрифтов являются одними из наиболее важных для документа. Если на клиентской машине не установлен указанный шрифт, то браузер будет отображать текст шрифтом, который задан по умолчанию для данной системы.
Как установить CSS свойства шрифта?
font-family
С помощью свойства font-family можно задать семейство, которым будет отображаться CSS жирный шрифт:
Через свойство CSS font family можно установить более одного шрифта. По умолчанию браузер будет использовать первый из указанных шрифтов, который установлен на компьютере конечного пользователя. Важно отметить, что названия семейства не зависят от регистра букв.
font-size
Можно установить значение font-size в абсолютных и относительных единицах измерения. Абсолютные единицы задают фиксированный CSS размер шрифта, относительные — задают размер в зависимости от размеров окружающих элементов:
Пиксели ( px ) — это наиболее часто используемые единицы измерения. Но если вы используете em, то это может помочь избежать некоторых проблем при изменении размеров элементов в окне просмотра:
Em связаны с текущим размером шрифта браузера. 1em равен текущему значению размера шрифта, установленному в браузере. Если сравнивать с пикселями, то вы можете вычислить значение em по следующей формуле: pixels/16=em:
Также можно задать размер CSS шрифта, используя процентные значения. font-size:100%; означает, что шрифт использует текущий размер шрифта браузера. Для увеличения размера нужно задать большее процентное значение. Аналогично, если нужно уменьшить размер шрифта, вы можете уменьшить процентное значение:
Приведенный выше код увеличивает размер шрифта в два раза по сравнению с текущим размером, установленным в браузере:
Этот код уменьшает размер шрифта CSS наполовину по сравнению с текущим размером шрифта браузера:
font-style
В CSS предусмотрены два значения для свойства font-style — italic и oblique :
Другие свойства
font-weight
Если нужно вывести жирный шрифт, то можете использовать свойство CSS font weight :
Значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900:
font-variant
Свойство font-variant используется, чтобы преобразовать все строчные буквы в заглавные. При этом преобразованные заглавные буквы будут выводиться меньшим шрифтом, чем оригинальные заглавные буквы в документе:
В следующем коде использовано большинство описанных выше свойств шрифтов в CSS :
Как задать стиль шрифта текста на css в html
Внешний вид текста на странице сайта влияет на его восприятие, поэтому чтобы сайт производил хорошее впечатление, его шрифты должны сочетаться с дизайном.
Чтобы изменить гарнитуру шрифта текста на сайте необходимо прописать в атрибуте style css свойство font-family и задать в нем название шрифта. Если в названии шрифта есть пробелы, то его нужно взять в одинарные кавычки, если для style используются двойные или, наоборот, взять в двойные кавычки, если style свойства обрамлены одинарными.
Безопасные шрифты в css
У каждого браузера и операционной системы свой набор поддерживаемых шрифтов. Если на устройстве пользователя не установлен шрифт, который вы прописали в свойствах, то он может некорректно отображаться или быть видоизмененным на заданный по умолчанию. Чтобы избежать некорректного отображения:
а.) Используют безопасные шрифты. Безопасными шрифты в css называются потому, что они поддерживаются большинством браузеров и операционных систем, а значит и отображаться, скорее всего, будут корректно. Основные безопасные шрифты приведены ниже.
б.) Указывают несколько шрифтов. В свойстве font-family можно указать несколько шрифтов через запятую, в этом случае вначале будет предпринята попытка найти первый написанный шрифт, если он неизвестен, то будет повторная попытка со следующим, указанным через запятую и так далее, пока шрифт не найдется. Первый найденный шрифт в свойстве font-family и будет использован для отображения. Если ни один из указанных через запятую шрифтов не нашелся, то, скорее всего, будет использован заданный по умолчанию в браузере.
Названия безопасных шрифтов
1. Семейство sans-serif(без засечек)
Семейство sans-serif — шрифты без засечек с прямыми и четкими контурами(обычно используются для заголовков и меню).
2. Семейство serif(с засечками)
Семейство serif — шрифты с засечками
| Безопасные шрифты | |
| ‘Palatino Linotype’ | Пример фразы |
| Georgia | Пример фразы |
| Serif | Пример фразы |
3. Семейство monospace(одинаковая ширина букв)
Семейство monospace — шрифты с одинаковой шириной всех букв.
| Безопасные шрифты | |
| ‘Lucida Console’ | Пример фразы |
| Courier | Пример фразы |
4. Семейство cursive(рукописные)
Семейство cursive — шрифты, имитирующие почерк.
| Безопасные шрифты | |
| ‘Comic Sans MS’ | Пример фразы |
Если ни один из написанных выше шрифтов вам не подошел, вы можете сделать надписи в графическом редакторе и сохранить их в виде картинок, которые затем вставить на сайте. На практике данный способ нередко используют для создания редких и оригинальных шрифтов у заголовков, ссылок меню.
Работа с типографикой
Область веб-типографики значительно расширилась за последнее время. Существует несколько разных причин роста популярности, одной из широко признанной причиной является разработка системы для встраивания собственных веб-шрифтов на сайт.
В прошлом мы были ограничены небольшим количеством шрифтов, которые могли использовать на сайте. Эти шрифты наиболее типовые установленные шрифты на компьютерах, так что они, скорее всего, правильно отображались на экране. Если шрифта на компьютере не было, то он и не отображался на сайте. Теперь, когда у нас есть возможность встраивать шрифты, у нас имеется гораздо большая палитра шрифтов на выбор, включая те, которые мы добавляем на сайт.
Возможность встраивания шрифтов даёт нам доступ к бесчисленным новым шрифтам, но при этом также важно знать основные принципы типографики. В этом уроке мы собираемся взглянуть на некоторые из этих основных принципов и как их применять для наших веб-страниц с помощью HTML и CSS.
Гарнитура и шрифт
Термины «гарнитура» и «шрифт» часто взаимозаменяемы, что приводит к путанице. Вот что означает каждый термин.
Гарнитура это то, что мы видим. Это художественное впечатление от того, как текст выглядит, воспринимается и читается.
Шрифт представляет собой файл, содержащий гарнитуру. Использование шрифта позволяет компьютеру получить доступ к гарнитуре.
Один из способов помочь прояснить разницу между гарнитурой и шрифтом — это сравнить их с песней и MP3. Гарнитура очень похожа на песню, в том что это произведение искусства. Она создана художником или художниками и открыта для публичного обсуждения. Шрифт, с другой стороны, очень похож на МР3 тем, что он сам не оказывает художественного впечатления, это только способ передачи художественной ценности.
Добавление цвета к тексту
Обычно первыми шагами, которые мы будем делать при создании сайта, являются выбор основной гарнитуры и цвета текста для использования. Хотя есть ряд разных свойств, которые могут быть изменены — размер, насыщенность и так далее, но гарнитура и цвет текста, как правило, оказывают наибольшее влияние на внешний вид и читаемость страницы. Избавьтесь от настроек браузера по умолчанию, примените собственную гарнитуру и цвет текста, что немедленно задаст тон нашей странице.
Давайте взглянем на CSS, необходимый для изменения цвета всего текста в пределах элемента на странице:
Изменение свойств шрифта
CSS предлагает много разных свойств для редактирования внешнего вида текста на странице. Эти свойства входят в две категории: свойства шрифта и свойства текста. Большинство из этих свойств начинаются с font- или text-. Для начала мы обсудим основные свойства шрифта.
font-family
Свойство font-family применяется, чтобы объявить, какой шрифт, а также какие резервные или заменяющие шрифты должны быть использованы для отображения текста. Значение font-family содержит несколько имён шрифтов, перечисляемых через запятую.
Первый указанный шрифт, начиная слева, является основным выбранным шрифта. Если первый шрифт недоступен, после него указываются альтернативные шрифты в порядке предпочтения слева направо.
Свойство font-family в действии выглядит так:
В данном случае Helvetica Neue является предпочтительным шрифтом для отображения. Если этот шрифт недоступен или не установлен на указанном устройстве, будет использоваться следующий шрифт в списке — Helvetica и так далее.
font-size
Свойство font-size даёт возможность установить размер текста, используя типовые значения размера, включая пиксели, em, проценты, пункты или ключевые слова.
Здесь в CSS устанавливается размер шрифта 14 пикселей для элемента :
font-style
Ниже CSS устанавливает для всех элементов с классом special свойство font-style как italic :
font-variant
font-weight
На практике, вот CSS для установки font-weight как bold для любого элемента с классом daring :
Числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900 связаны с гарнитурами шрифтов, которые имеют несколько жирностей. Их порядок начинается с самой тонкой жирности, 100, и повышается до самой толстой жирности, 900. Для справки, значение normal соответствует 400, а значение bold соответствует 700. Таким образом, любое числовое значение ниже 400 будет достаточно тонким, а любое значение выше 700 будет достаточно жирным.
Изменение насыщенности шрифта до 600 для любого элемента с классом daring теперь отображает текст как полужирный — не совсем жирный, как ключевое слово bold до этого:
Насыщенность шрифта
Перед применением числового значения мы должны проверить и посмотреть, пойдёт ли используемый шрифт с указанной насыщенностью. Попытка использовать число, которое не доступно для данного шрифта, приведёт эти стили к ближайшему значению.
Например, шрифт Times New Roman содержит две насыщенности: нормальная или 400 и жирная или 700. Попытка использовать 900 установит шрифт в ближайшую насыщенность, 700 в данном случае.
line-height
Межстрочный интервал также может быть использован для вертикального выравнивания по центру одной строки текста внутри элемента. Используя одинаковые значения свойств line-height и height вы выровняете текст по центру вертикали:
Этот метод может быть полезен для кнопок, предупреждающих сообщений и других однострочных текстовых блоков.
Универсальное свойство font
Свойства шрифта все разом
Давайте взглянем на пример, который использует все эти свойства шрифта совместно. В следующем HTML и CSS демонстрируются разные возможности для стилизации текста.
Демонстрация свойств шрифта
Псевдоклассы в CSS
На практике
Вернёмся назад к нашему сайту Styles Conference и начнём добавлять некоторые свойства шрифта.
В попытке сохранить наш файл main.css организованным, насколько это возможно, создадим новый раздел для этих пользовательских стилей, поместив его чуть ниже нашего сброса и выше стилей сетки.
Нам нужно добавить следующее:
В уроке 4, «Открываем блочную модель», мы начали добавлять некоторые типографские стили, в частности, нижний margin для некоторых заголовков разного уровня и абзацев. В этом же разделе файла main.css давайте добавим цвет к заголовкам от первого до четвёртого уровней.
Пока мы здесь, добавим также размер шрифта для этих заголовков. Наши элементы
планируются чуть более уникальными, чем остальные заголовки. Соответственно, мы собираемся немного изменить их стили.
Значение font-weight как 400 для элемента
на самом деле сделает это немного толще, чем остальные заголовки и текст.
У нас всё получается, так что давайте продолжать, добавляя некоторые стили для наших ссылок. В данный момент они синие, так указал браузер по умолчанию. Сделаем их того же цвета, что наши заголовки от
Поскольку мы совсем немного увеличили ширину логотипа, добавим margin к элементу
, а затем используя этот класс в нашем CSS, чтобы применить соответствующие поля.
Не забывайте, что изменения в элементе
должны произойти на каждой странице.
Учитывая существующие стили, стиль для нашего подвала должен выглядеть так:
Также обновим немного нашу главную страницу. Начнём с раздела hero и увеличим общий line-height в разделе до 44 пикселей. Мы также сделаем текст в этом разделе больше, увеличив font-size для элемента
до 36 пикселей и font-size для элемента
Мы можем внести все эти изменения, используя существующий класс hero и создав новые селекторы для элементов
. Наши стили для раздела hero переделаются теперь таким образом:
В завершении, у нас есть небольшая проблемка, которую надо исправить на главной странице. Ранее мы задали для всех ссылок светло-серый цвет при наведении на них. Это прекрасно работает, за исключением трёх тизеров на главной странице, где ссылка охватывает оба элемента
К счастью, мы можем это исправить, хотя для этого потребуется достаточно сложный селектор. Начнём с добавления класса teaser ко всем трём колонкам на главной странице. Мы будем использовать этот класс в качестве отборочного селектора в ближайшее время.
, к которым мы хотели бы применить стили.
В общей сложности, наш селектор и стили для этих элементов
будут выглядеть следующим образом:
Уфф, это было немного. Хорошая новость — наша страница Styles Conference начинает выглядеть действительно приятно и показывает немного индивидуальности.
Рис. 6.01. Наш сайт Styles Conference получил немного любви от горстки шрифтовых свойств
Применение текстовых свойств
Знать, как установить семейство, размер, стиль, начертание, насыщенность и межстрочный интервал это только полдела. Дополнительно мы можем решить, как выровнять, украсить, трансформировать текст, добавить красную строку и межбуквенное расстояние в текст. Начнём с выравнивания текста.
text-align
Ниже CSS устанавливает текст всех абзацев выровненный по центру:
text-decoration
Здесь стиль для любого элемента с классом note задаёт text-decoration как underline :
text-indent
Свойство text-indent может быть использовано для создания красной строки внутри элемента, как это обычно наблюдается в печатных изданиях. Для этого свойства доступны все основные значения размера, в том числе пиксели, пункты, проценты и так далее. Положительные значения делают отступ текста внутрь, в то время как отрицательные значения делают отступ наружу.
Здесь CSS меняет отступ текста для всех элементов
внутрь на 20 пикселей:
text-shadow
Свойство text-shadow позволяет нам добавить тень или несколько теней к тексту. Свойство обычно принимает четыре значения, все они перечисляются друг за другом слева направо. Первые три значения — это размер, а последнее значение — цвет.
Здесь для всего текста элемента
свойство text-shadow задаёт на 30% прозрачную чёрную тень, сдвинутую на 3 пикселя вправо, на 6 пикселей вниз и с размытием 2 пикселя:
Использование отрицательных значений размера для горизонтальных и вертикальных смещений позволяет перемещать тени влево и вверх.
Несколько теней также могут быть соединены вместе с помощью разделённых запятыми значений, добавляя больше, чем одна тень для текста. Применение ряда теней позволяет разместить их выше и ниже текста или в любой желаемой вариации.
box-shadow
box-shadow также принимает необязательное четвёртое значение размера, перед значением цвета, для растяжения тени. Положительное значение растяжения расширит тень больше, чем размер элемента, к которому применяется свойство, а отрицательное значение сократит тень меньше, чем размер самого элемента.
Наконец, свойство box-shadow может включать впереди необязательное значение inset для размещения тени внутри элемента, а не снаружи.
text-transform
Значение capitalize делает заглавной первую букву каждого слова, значение uppercase устанавливает заглавной каждую букву, а значение lowercase делает каждую букву строчной. С помощью none любые из этих унаследованных значений вернутся к исходному стилю текста.
Ниже CSS устанавливает текст для всех элементов заглавными буквами:
letter-spacing
Используя свойство letter-spacing мы можем регулировать (или отслеживать) расстояние между букв на странице. Положительное значение будет толкать буквы дальше друг от друга, а отрицательное значение будет тянуть буквы ближе друг к другу. Значение none вернёт пространство между букв к своей обычной величине.
Использование относительного размера со свойством letter-spacing гарантирует, что мы поддерживаем правильное расстояние между буквами, когда меняется font-size для текста. Это, однако, всегда хорошая идея, чтобы перепроверить нашу работу.
Здесь с помощью CSS все буквы в пределах наших элементов
word-spacing
Здесь каждое слово в элементе
Свойства текста все разом
Давайте вернёмся к нашей демонстрации тизера блога, на этот раз добавив несколько текстовых свойств перед свойствами шрифта.
Демонстрация свойств текста
На практике
С текстовыми свойствами подмышкой, перепрыгнем обратно к нашему сайту Styles Conference и включим их в работу.
В настоящий момент каждая ссылка на странице подчёркивается, что является стилем по умолчанию для ссылок. Этот стиль является временами несколько преобладающим, с другой стороны, мы собираемся его немного поменять.
Мы могли бы использовать свойство text-decoration вместо border-bottom для подчёркивания ссылок внутри каждого абзаца, однако с помощью свойства border-bottom мы получим больше контроля над внешним видом подчёркивания. Здесь, например, подчёркивание будет другого цвета, чем сам текст.
Наш раздел со ссылками, который включает в себя предыдущие стили при наведении, теперь должен выглядеть следующим образом:
Возвращаясь к нашим элементам
должны выглядеть следующим образом:
Наши стили для элемента с классом primary-nav теперь должны выглядеть следующим образом:
Нам нужно добавить свойство text-align со значением right для элемента
При добавлении к существующему свойству margin наши новые стили для элемента
с классом tagline будут выглядеть следующим образом:
Нам также хотелось бы, чтобы наши навигационные меню в элементах и располагались по правому краю. Поскольку оба элемента и содержат дочерние обтекаемые элементы, мы можем использовать тот же подход, что проделали с нашим слоганом.
Обтекаемые элементы внутри и убираются из обычного потока страницы, и это заставляет другие элементы обтекать вокруг них. В данном конкретном случае наши навигационные меню это элементы, которые обтекают вокруг обтекаемых элементов.
А элемент будет выглядеть так:
Не забывайте, что изменения в наших элементах и должны быть сделаны на каждой странице.
У Styles Conference теперь серьёзный стиль (плохая шутка, извините). Если серьёзно, то все наши стили вместе сочетаются очень хорошо и сайт прогрессирует.
Рис. 6.02. Наш сайт Styles Conference продвигается довольно хорошо после добавления нескольких текстовых свойств
Использование безопасных веб-шрифтов
По умолчанию, есть несколько шрифтов которые заранее установлены на каждом компьютере, планшете, смартфоне или другом устройстве с браузером. Поскольку они установлены на каждом устройстве, мы можем свободно использовать эти шрифты на наших сайтах, зная, что независимо от того, какое устройство просматривает наш сайт, шрифт будет отображаться правильно. Эти шрифты известны как «безопасные веб-шрифты». Таких шрифтов только горстка и наиболее надёжные перечислены здесь:
Встраивание веб-шрифтов
Демонстрация свойств текста
Возможность встраивать любые шрифты на сайте не означает, что мы имеем юридическое право сделать это. Гарнитуры являются формой искусства и размещение их на нашем сервере может позволить другим легко украсть их. Полномочия применять гарнитуру зависят от лицензирования, на которые у нас есть права.
К счастью, важность использования новых шрифтов на сайте была признана и компании начали разработку способов лицензирования и включают новые шрифты на сайтах. Некоторые из таких компаний, вроде Typekit и Fontdeck, работают по модели подписки для лицензирования шрифтов, в то время как другие, вроде Google Fonts, лицензируют шрифты бесплатно. Перед загрузкой каких-либо шрифтов удостоверьтесь, что у вас есть на это разрешение.
На практике
Чтобы добавить немного характера к нашему сайту Styles Conference, попробуем использовать на нём Google Font.
Зайдём на сайт Google Fonts и поищем шрифт, который мы хотели бы использовать: Roboto. После того как нашли, добавим его к нашей коллекции, следуя инструкциям на сайте.
Когда придёт время выбора, какое начертание мы хотели бы использовать, удостоверимся, что указали 300 и 400, как мы уже применяли в нашем CSS. Также добавим 100 к коллекции для другого варианта тоже.
Хотя Roboto это одно слово, но поскольку это встроенный веб-шрифт, то мы хотим взять его в кавычки внутри любого CSS. Наш новый стиль для элемента будет выглядеть следующим образом:
Теперь Roboto должен загрузиться и работать, что видно по всему тексту на сайте Styles Conference. Поближе взглянем на наш логотип и обновим его немного.
Все стили для нашего логотипа будут выглядеть следующим образом:
Наш сайт Styles Conference проделал несколько довольно больших шагов в этом уроке и внешний вид сайта начинает по-настоящему блистать.
Рис. 6.03. Главная страница Styles Conference после добавления веб-шрифта от Google
Демонстрация и исходный код
Ниже вы можете посмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Добавление цитат
. Из-за того, что цитаты, как правило, отличается от обычного текста по своему виду, мы обсудим их здесь, в уроке по типографике.
Понять, когда и какой элемент использовать для разметки цитаты правильно, отнимает немного практики. В общем, соблюдайте следующие правила:
: применяется для наиболее длинных внешних цитат.
Цитата на творческую работу
Строчный элемент используется в HTML в качестве указателя на творческую работу; элемент должен включать в себя название работы, имя автора, или ссылку ведущую на работу. По умолчанию, содержимое внутри элемента отображается в браузере курсивом.
Для получения дополнительной справки поможет добавление гиперссылки на первоисточник цитаты, когда это целесообразно.
Демонстрация цитаты на творческую работу
Строчные цитаты
Демонстрация строчной цитаты
Внешние цитаты
Цитируя большой блок текста, который заимствован из внешнего источника и занимает несколько строк, мы будем использовать элемент
. Данный элемент является блочным и может содержать другие вложенные в него блочные элементы, в том числе заголовки и абзацы.
Вот пример, который использует элемент
Более длинные цитаты в элементе
Атрибут cite может добавляться к элементу
тем же путём, что был использован для элемента ранее, чтобы указать на цитату в виде URL. Элемент может быть добавлен после самой цитаты для указания оригинального источника цитаты, если это необходимо.
Здесь в HTML излагается расширенная цитат из Стива Джобса, которая первоначально появилась в журнале Fortune. Цитата размечена с помощью элемента
Демонстрация внешней цитаты
Резюме
Учиться стилизовать текст увлекательно, так как наш контент начинает передавать некоторые эмоции. Мы также можем начать играть с иерархией нашего содержимого, что делает наш сайт более разборчивыми и удобным.
Напомним быстро, что мы обсудили в этом уроке:
Концентрирование на тексте и небольшое баловство с типографикой продвинуло наш дизайн довольно далеко вперёд. Дальше мы внесём в наш сайт чуть больше цвета с помощью фона и градиентов.