Как сделать шрифт без засечек в css

Добавил пользователь Alex
Обновлено: 09.09.2024

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

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

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

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

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

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

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

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

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

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

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

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

.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.

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

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

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

Стиль шрифта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запоминание правильного порядка значений. Используя обобщённые свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщённом свойстве. С опытом вы сможете переключиться на одно правило.
Обобщённые свойства перебивают отдельные. Если в коде вы указали font-variant: small-caps; , а потом для этого же элемента применили font: 16px/24px sans-serif; , то капитель будет сброшена в значение по умолчанию.

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

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

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

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

Об обучении на Хекслете

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

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

CSS предлагает несколько свойств шрифтов, непосредственно влияющих на визуализацию текста. Свойство font-family определяет, какой шрифт использовать.

Общие семейства шрифтов

Шрифты группируются по пяти общим семействам:

serif — на конце каждого символа прикреплены небольшие линии;
sans-serif;
monospace;
cursive;
fantasy.

cursive и fantasy никогда не используются.

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

С этим правилом CSS веб-страница будет использовать шрифт sans-serif , определённый пользователем в его настройках.

Надёжные веб-шрифты

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

Ваша веб-страница будет использовать Arial при условии, что он установлен на компьютере пользователя. Если шрифт Arial недоступен, то браузер будет применять шрифт с засечками по умолчанию (обычно используется Times New Roman).

Arial является безопасным выбором, хотя бы потому, что он установлен на всех компьютерах Windows и Mac, а также на большинстве систем Linux. Именно поэтому Arial считается надёжным веб-шрифтом: вы можете безопасно использовать его в CSS и быть почти уверены, что шрифт на компьютере пользователя будет установлен.

Есть девять надёжных веб-шрифтов:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Применение списка шрифтов

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

При определении нескольких значений для font-family , браузер будет искать первое значение Arial и использовать его. Если Arial не доступен, то будет использоваться следующий шрифт Verdana. И, наконец, если и он не доступен, то будет использоваться шрифт браузера без засечек по умолчанию.

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

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

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

Семейство шрифта [font-family]

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

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma". Generic family Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

Разницу можно также проиллюстрировать так:

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

Список шрифтов может выглядеть так:

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.

Стиль шрифта [font-style]

Свойство font-style определяет normal, italic или oblique. В примере все заголовки

будут показаны курсивом italic.

Вариант шрифта [font-variant]

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

Вес шрифта [font-weight]

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

Размер шрифта [font-size]

Размер шрифта устанавливается свойством font-size .

Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:

Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.

Вот иллюстрация того, как настроить размер шрифта в Mozilla Firefox и Internet Explorer. Попробуйте сами - прекрасное свойство, как вы полагаете?

Сокращённая запись [font]

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

Например, вот четыре строки описания свойств шрифта для

Используя сокращённую запись, код можно упростить:

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family

Резюме

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

Для задания параметров шрифтов в 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-страница с тремя параграфами, зададим каждому уникальный идентификатор:

Читайте также: