Как сделать шрифт bold css
Перейти к содержимому

Как сделать шрифт bold css

  • автор:

@font-face

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016 .

CSS @-правило @font-face позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local() , с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url() . @font-face позволяет разрабатывать контент не ограничиваясь набором «безопасных» шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование url() и local() , чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила (en-US) .

@font-face  font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); > 

Синтаксис

Descriptors

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

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

Позволяет контролировать другие расширенные особенности OpenType-шрифтов.

Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.

Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.

Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format() : src: url(ideal-sans-serif.woff) format(«woff»), url(basic-sans-serif.ttf) format(«opentype»);Список доступных форматов: «woff» , «woff2» , «truetype» , «opentype» , «embedded-opentype» , и «svg» .

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

MIME-типы шрифтов

Формат MIME-тип
TrueType font/ttf
OpenType font/otf
Web Open File Format font/woff
Web Open File Format 2 font/woff2

Примечания

  • Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью CORS.
  • @font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
.className  @font-face  font-family: "MyHelvetica"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url("MgOpenModernaBold.ttf"); font-weight: bold; > > 

Формальный синтаксис

@font-face =
@font-face < >

Примеры

Использование загружаемого шрифта

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

doctype html> html lang="en-US"> head> meta charset="utf-8" /> meta name="viewport" content="width=device-width" /> title>Web Font Sampletitle> style media="screen, print"> @font-face  font-family: "Bitstream Vera Serif Bold"; src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf"); > body  font-family: "Bitstream Vera Serif Bold", serif; > style> head> body> Это шрифт "Bitstream Vera Serif Bold" (он не поддерживает кириллические символы). body> html> 

Результат будет таким:

Использование локальных шрифтов

В этом примере используется локальный пользовательский шрифт «Helvetica Neue Bold». Если у пользователя этот шрифт не установлен (поиск происходит по полному названию шрифта и по Postscript-названию), тогда вместо него используется загружаемый шрифт «MgOpenModernaBold.ttf»:

@font-face  font-family: "MyHelvetica"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url("MgOpenModernaBold.ttf"); font-weight: bold; > 

Спецификации

Specification
CSS Fonts Module Level 4
# font-face-rule

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • WOFF
  • Генератор FontSquirrel @font-face
  • Красивые шрифты с помощью @font-face
  • Библиотека шрифтов

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 8 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

Страшным сном дизайнера и верстальщика является фраза заказчика «Поиграйся со шрифтами». Многие эту фразу слышали, но а как же поиграть со шрифтами? 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 студентов

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

Как игнорировать увеличение родителя при font-weight: bold?

Так вот, когда текст делается жирным, то увеличивается ширина li , тогда все соседние справа блоки начинают прыгать (когда пункты меню активного меняются!).

Как от этого избавиться (не увеличивать ширину li при увеличении внутри его текста)?

Обновление

li display inline-block padding 7px 12px; margin-right 15px //add &.active border 2px solid #fdb913 //МАГАЗИНЫ border-radius 20px a border none font-weight bold color #b6b2a1 a font-size 18px display inline-block color textBlue border-bottom 1px solid #c1ddf1 

Подключение шрифтов из папки.
CSS свойство font-face.

Есть разные способы подключения нестандартных шрифтов к сайту: скриптом, с помощью сервиса Google fonts или из локальной папки сайта. Для реализации последнего из способов используют CSS-правило @font-face .

Одинаковые шрифты подключаются с одним именем, различающуюся жирность и стиль пишут в font-weight и font-style.

Для современных (с 2017 года) браузеров нужен единственный формат: woff2.

@font-face < font-family: "OpenSans"; src: url("fonts/opensans.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; >@font-face < font-family: "OpenSans"; src: url("fonts/opensansbold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; >

Если нужна поддержка браузеров с ~2011 года выпуска, то им потребуются форматы woff2 и woff. Вначале указывается путь к файлу woff2, затем к woff. Таким образом, если браузер умеет работать с более современным форматом шрифтов, то он применит его. Если нет, то возьмет формат woff.

@font-face < font-family: "OpenSans"; src: url("fonts/opensans.woff2") format("woff2"), url("fonts/opensans.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; >@font-face < font-family: "OpenSans"; src: url("fonts/opensansbold.woff2") format("woff2"), url("fonts/opensansbold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; >

Форматы ttf, eot, svg нужны только очень древним браузерам. Сейчас нет нужды их использовать.

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

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

font-weight — соответствие слов и чисел

100 — Thin (Hairline)
200 — Extra Light (Ultra Light)
300 — Light
400 — Normal (Regular)
500 — Medium
600 — Semi Bold (Demi Bold)
700 — Bold
800 — Extra Bold (Ultra Bold)
900 — Black (Heavy)

Свойство unicode-range

CSS свойство unicode-range задает определенный диапазон символов для шрифта, определенного в @font-face и доступного для использования на странице. Если на странице нет символов из указанного диапазона, то шрифт не загружается. Если же есть хоть один символ, то загрузится весь шрифт.

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

Обратите внимание, что unicode-range не разбивает сам шрифтовой файл, он только показывает нужно ли загружать этот файл, есть ли соответствующие ему символы.

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

Для подключения кириллицы:

@font-face < font-display: swap; font-family: "Lato"; src: url("/fonts/lato-light/lato-light.cyrillic.woff2") format("woff2"), url("/fonts/lato-light/lato-light.cyrillic.woff") format("woff"); font-weight: 300; font-style: normal; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица >

Как это работает? Браузер анализирует ваш DOM и понимает, какие символы используются на сайте и, если есть совпадение, то шрифт закачивается. В данном примере, если на сайте есть кириллица, то lato-light.cyrillic.woff2 будет загружен и применится, а шрифт lato-light.latin.woff2 даже не закачается.

Или другой пример: вот таким способом можно применить другой шрифт только к цифровым символам:

@font-face < font-family: Georgia; src: url("fonts/fontin_sans_regular.eot"); src: url("fonts/fontin_sans_regular.eot?#iefix") format("embedded-opentype"), url("fonts/fontin_sans_regular.woff2") format("woff2"), url("fonts/fontin_sans_regular.woff") format("woff"), url("fonts/fontin_sans_regular.ttf") format("truetype"), url("fonts/fontin_sans_regular.svg#drevodel_regular") format("svg"); font-weight: normal; font-style: normal; >@font-face < font-family: "drevodel_regular"; src: url("fonts/drevodel_regular.eot"); src: url("fonts/drevodel_regular.eot?#iefix") format("embedded-opentype"), url("fonts/drevodel_regular.woff2") format("woff2"), url("fonts/drevodel_regular.woff") format("woff"), url("fonts/drevodel_regular.ttf") format("truetype"), url("fonts/drevodel_regular.svg#drevodel_regular") format("svg"); font-weight: normal; font-style: normal; unicode-range: U+30-39; >

Примечание: unicode-range не работает со шрифтами подключенными через Google Fonts, необходимо локальное подключение.

  • Предыдущий: Контент по центру, фон по ширине
  • Следующий: Псевдокласс :has

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *