font-family
CSS-свойство font-family определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.
Интерактивный пример
Значения разделены запятыми, чтобы указать, что они являются альтернативами. Браузер выберет из списка первый шрифт, который установлен или может быть скачан используя правило @font-face .
Часто удобно использовать сокращённое свойство font , чтобы задать font-size и другие свойства, которые относятся к шрифту.
Вы всегда должны добавлять по крайней мере одно имя общего семейства шрифтов, так как нет гарантии, что какой-либо из указанных шрифтов будет доступен. Это позволит браузеру выбрать подходящий запасной шрифт, когда возникнет необходимость.
Свойство font-family определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется по одному символу за раз, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых стилях , видах (en-US) или размерах , эти свойства могут так же влиять на выбор шрифта.
Синтаксис
/* Имя шрифта и общие семейства шрифтов */ font-family: Gill Sans Extrabold, sans-serif; font-family: "Goudy Bookletter 1911", sans-serif; /* Только общие семейства */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; font-family: emoji; font-family: math; font-family: fangsong; /* Глобальные значения */ font-family: inherit; font-family: initial; font-family: unset;
Свойство font-family получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как или .
В приведённом ниже примере перечислены два семейства шрифтов, первое , а второе как :
font-family: Gill Sans Extrabold, sans-serif;
Значения
Имя семейства шрифтов. К примеру, «Times» и «Helvetica» это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.
Общие семейства шрифтов используются как резервный механизм для сохранения некоторого авторского стиля в момент, когда ни один из желаемых шрифтов недоступен. Общие семейства шрифтов являются ключевыми словами и не должны браться в кавычки. Общее семейство шрифтов должно определяться последним в списке семейств шрифтов. Определены следующие ключевые слова:
Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания. Например, «Lucida Bright», «Lucida Fax», Palatino, «Palatino Linotype», Palladio, «URW Palladio», serif.
Глифы имеют гладкие окончания. Например, «Open Sans», «Fira Sans», «Lucida Sans», «Lucida Sans Unicode», «Trebuchet MS», «Liberation Sans», «Nimbus Sans L», sans-serif.
Все глифы имеют одинаковую фиксированную ширину. Например, «Fira Mono», «DejaVu Sans Mono», Menlo, Consolas, «Liberation Mono», Monaco, «Lucida Console», monospace.
Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, «Brush Script MT», «Brush Script Std», «Lucida Calligraphy», «Lucida Handwriting», «Apple Chancery», cursive.
Фэнтезийные шрифты — это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
Глифы, взятые из дефолтного шрифта пользовательского интерфейса на данной платформе. Поскольку типографские традиции широко варьируются по всему миру, это общее семейство предназначено для гарнитур, которые не отображаются точно в других общих семействах.
Это семейство предназначено для особых стилистических задач представления математики: верхний индекс и нижний индекс, скобки, которые пересекают несколько строк, вложенные выражения и двойные глифы с различными значениями.
Шрифты, специально предназначенные для отображения эмодзи.
Особый стиль китайских иероглифов, который является чем-то средним между стилем с засечками Song и курсивным стилем Кай. Этот стиль часто используется для правительственных документов.
Валидные имена семейства шрифтов
Имена семейств шрифтов должны быть указаны либо в виде строк в кавычках, либо в виде последовательности одного или нескольких идентификаторов без кавычек. Если имя семейства шрифтов содержит цифры или знаки пунктуации, такое имя должно быть заключено в кавычки.
Например, следующие объявления являются валидными:
font-family: Gill Sans Extrabold, sans-serif; font-family: "Goudy Bookletter 1911", sans-serif;
Следующие объявления являются не валидными:
font-family: Goudy Bookletter 1911, sans-serif; font-family: Red/Black, sans-serif; font-family: "Lucida" Grande, sans-serif; font-family: Ahem!, sans-serif; font-family: test @foo, sans-serif; font-family: #POUND, sans-serif; font-family: Hawaii 5-0, sans-serif;
Формальный синтаксис
font-family =
[ (en-US) | (en-US) (en-US) ] (en-US) # (en-US)
Примеры
Некоторые общие семейства шрифтов
.serif font-family: Times, Times New Roman, Georgia, serif; > .sansserif font-family: Verdana, Arial, Helvetica, sans-serif; > .monospace font-family: Lucida Console, Courier, monospace; > .cursive font-family: cursive; > .fantasy font-family: fantasy; > .emoji font-family: emoji; > .math font-family: math; > .fangsong font-family: fangsong; >
div class="serif">This is an example of a serif font.div> div class="sansserif">This is an example of a sans-serif font.div> div class="monospace">This is an example of a monospace font.div> div class="cursive">This is an example of a cursive font.div> div class="fantasy">This is an example of a fantasy font.div> div class="math">This is an example of a math font.div> div class="emoji">This is an example of an emoji font.div> div class="fangsong">This is an example of a fangsong font.div>
Спецификации
| Specification |
|---|
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |
| Начальное значение | зависит от браузера |
|---|---|
| Применяется к | all elements and text. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | discrete |
Совместимость с браузерами
BCD tables only load in the browser
[1] system-ui в данный момент не реализовано, смотри баг 1226042.
[2] system-ui реализовано в Safari (wkbug.com/151493), возможно будет выпущено в ближайшем времени.
[3] префиксный алиас -apple-system поддерживается в Safari, начиная с OS X 10.11 и iOS 9, а также в Firefox 43 на macOS (баг 1201318).
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 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Не подключается шрифт к SVG
Есть такой SVG код, нужно что бы текст под самой иконкой был определенного шрифта.
В Google подсказывают добавлять инлайн стилем font-family , однако такой способ не привел ни к чему хорошему, шрифт не отображается.
Сам SVG логотип добавлен в таком виде в каком есть, т.е. вставлен напрямую в код svg тегом. Была попытка вставить в тег style в самом svg элементе нужный шрифт, но и так не получилось.
Пытался в главном css-файле страницы прописать стили для svg text , и это не помогло. Причем шрифт 100% подключен к странице, т.к. на других элементах работает. Как правильно подключать?
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 2 апр 2018 в 16:43
uzi_no_uzi uzi_no_uzi
2,186 2 2 золотых знака 18 18 серебряных знаков 50 50 бронзовых знаков
Как подключить гугл шрифты Google Fonts
Тут же решил написать заметку в блог, чтобы вы, дорогие читатели, были в курсе об этом замечательном инструменте.
Как подключить гугл шрифты
Конечно, в первую очередь нас интересуют русские шрифты, поэтому заходим на сайт и выбираем во вкладке «Language» Cyrillic или Cyrillic Extended.
Таким образом, мы отфильтровали все шрифты и оставили только русскоязычные. На момент написания статьи кириллических 113, а расширенных кириллических 78.
Далее, во вкладке «Сategories» можно поставить фильтр на отображение шрифтов, которые не имеют засечек, выбрать рукописный и так далее.
Выпадающий список в «Font properties» позволяет задать дополнительные настройки и отфильтровать шрифты по ширине, толщине и другим параметрам, а галочка напротив «Show only variable fonts» позволяет отсеять не вариативные шрифты, в которых не предусмотрены сразу несколько видов толщины, наклона или курсива.
После того, как определились со шрифтом кликайте по нему и вас перебросит на страницу, где можно выбрать какие именно типы вам нужны.
Теперь можете выбрать жирность и курсив, которые необходимы в вашем проекте, кликая по «Select this style». Кстати, если вам нужен еще и другой шрифт, вы может вернуться на шаг назад и подключить его тоже. Нам не предлагают подключать все и сразу, потому что увеличит вес файлов и замедлит загрузку сайта в целом. Поэтому, такая тонкая кастомизация только в плюс.
Если список вас устраивает, то переходите во вкладку Embed. Тут вас ждет дальнейшая инструкция по подключению.
Если вы планируете подключать шрифты в шапке сайта, то разместите между тегами «head» полученную строку. В моем случае это:
Для использования Google Fonts в CSS, у нужного класса или тега нужно указать:
font-family: 'Roboto', sans-serif;
Кроме того, шрифт можно импортировать через CSS. Перейдите во вкладку «@import» и скопируйте предложенную строку в свою таблицу стилей.
Не забывайте, что все импорты из других файлов в CSS нужно делать в начале документа.
Вот и все, теперь вы знаете, как подключить шрифты Google к своему сайту. Если есть вопросы, задавайте их в комментариях.
Конечно, в следующих статьях мы обязательно поговорим о том, как подключить любой нестандартный шрифт, который у вас имеется на сайт поэтому подписывайтесь на обновления в социальных сетях, чтобы не пропустить. А на сегодня все.
08/10/2022 Дмитрий Давыдов
8 комментариев
Полезная информация. пару месяцев искала ее назад. Много времени потратила.
А в какой последовательности необходимо подключать шрифт с помощью такой ссылки? Я имею в виду в head содержится много ссылок и как выбрать правильно расположение для данной? Я слышал, что порядок подключения играет роль. Например, все css подключают в начале, а js-файлы в конце.
Сss подключают первыми, так как они отвечают за отображение страницы. Js подключают позже, так как он используется, чаще всего, после того, как отобразилась страничка. Иногда, есть возможность подключить js в конце страницы, как и css, иногда это играет ключевую роль и нельзя. Все зависит от конкретного случая. Шрифт гугл, ну подключите после основного файла стилей. В данном случае это не критично и вы не заметите разницы, где бы не расположили. Но все css подключать до использования js. Все это связано с тем, что команды выполняются синхронно, друг за другом. И если скрипты «Тяжелые» то их загрузка может занять слишком много времени. Поэтому, сначала подключают то, что отвечает за основное оформление, а потом второстепенные функции. Как-то так, надеюсь, что общая картина понятна. Конечно, есть возможность грузить скрипты асинхронно и это ускорит их загрузку, но это уже другая история.
Сергей, если вы используете шрифт в своем файле стилей, то подключать шрифт надо ДО подключения своего файла стилей.
remenergo.pro
Спасибо, полезная информация, как раз искал — что лучше @import или link для шрифтов. Раньше все время подключал через импорт якобы, чтобы код чище был, а оказывается это влияет на скорость, будем исправлять.
Какие шрифты использовать для email-рассылки
Придумать письмо – это только первый этап, нужно еще его качественно оформить. Ранее мы рассказывали о трендах в дизайне email-рассылок. Сегодня поговорим о шрифте для письма. Правильно подобранный шрифт, который гармонирует с общим дизайном сообщения, позволяет подписчику легко «сканировать» текст, следовательно, вы быстрее получите его отклик. Отображение шрифтов для получателей во многом зависит от возможностей устройства, на котором открывают сообщение.
Популярные шрифты для письма
Для начала нужно оговорить классы шрифтов:
- антиква (serif) – символы имеют точки, завитки, засечки на концах;
- гротеск (sans serif) – строгие прямые линии, без дополнений.
Давайте познакомимся с “безопасными” шрифтами – они правильно отображаются всеми почтовыми клиентами:
- Times New Roman – антиква, был создан для великобританской газеты The Times. Шрифт занимает мало места и удобен для чтения, самый используемый в мире для официально-делового стиля. Возможно, из-за официальности его редко применяют в email-маркетинге.
- Helvetica – неогротеск, широко распространен в Европе и США, в 2001 году в нем увеличено количество символов до 1866. Любимый шрифт многих дизайнеров, он нейтрален относительно других, но в нем недостаточное расстояние между глифами (элементы шрифта), поэтому текст смотрится сбитым.
- Arial – гротеск, практически копирует Helvetica, наиболее распространен в мире. Это системный шрифт операционных систем Windows и MacOS, в то время как Helvetica предустановлена только на MacOS. При этом Arial легче, чем Helvetica.
Почтовый сервис Apple Mail использует по умолчанию Helvetica, а Gmail — Arial, если браузер его не поддерживает – переходит на Helvetica. По данным Litmus Email Analytics, Apple Mail использует 11% аудитории по всему миру, а Gmail – 27%.
В Arial и Helvetica символы имеют аналогичные элементы, которые отражены по вертикали или горизонтали. Поэтому некоторые буквы трудно отличить, например: b и d, p и q, – это замедляет чтение. Альтернативные варианты, которыми можно заменить эти шрифты: Georgia и Verdana. - Georgia – в стиле переходной антиквы. Шрифт с красивым курсивным полужирным начертанием и короткими засечками на концах символов. Отличительная черта – прыгающие цифры. Этот шрифт универсальный вариант: его используют как в официально-деловом стиле, так и в веб-дизайне.
- Verdana – гротеск, разрабатывался специально для Microsoft с целью улучшить читаемость текста на экранах с низким расширением. Шрифт с достаточным просветом внутри символов, буквы открытой формы.
- Tahoma – гротеск, очень похож на Verdana, но с полужирным начертанием. Имеет зауженные символы и узкий апрош (расстояние между глифами).
- Trebuchet MS – гротеск, разрабатывался под те же требования, что и Verdana, но с незначительными изменениями символов: добавление/исключение некоторых деталей.
- Courier – антиква, каждый знак имеет одинаковую ширину (моноширинный). Похож на шрифт печатной машинки, использовался во всех отраслях печатной промышленности, например, Госдепартаментом США вплоть до 2004 года (после заменен на Times New Roman). Courier New с более выраженными точками и запятыми. Этот шрифт, не очень подходит для email-рассылок, т.к. слишком широкий.
- Palatino – антиква, создан для печати и прессы, основан на почерках итальянских мастеров эпохи Ренессанс. Символы близки к каллиграфическим.
- Geneva – гротеск, редизайн Helvetica с дополнением базового набора лигатур.
- Lucida Sans – гротеск, первый юникод-шрифт. Не рекомендуем использовать его для отображения текста кириллицей, т.к. эта версия достаточно слабая.
Эти шрифты можно считать лучшими для рассылок, так как они безопасные и удобочитаемые. Но можно создать свой личный шрифт, который будет даже привлекательнее самых популярных шрифтов! Кастомные шрифты нужны для создания индивидуального стиля конкретного бренда, это то, чего вы больше нигде не встретите. Собственные шрифты помогают выделиться среди конкурентов и выстроить устойчивые ассоциации с брендом у пользователя.
Кастомные шрифты используют такие компании, как: Apple, Nokia, IBM, BBC, Netflix и т.д. До недавнего времени нельзя было использовать собственные шрифты в email-рассылке. Теперь, в редакторе писем eSputnik появилась возможность добавления кастомного шрифта из других источников.
Как выбрать и использовать шрифты для email-рассылки
Какой шрифт выбрать для писем антиква или гротеск – здесь мнения категорически расходятся. Помните, что текст без засечек считается более удобным для чтения, если его открывают с десктопной версии. Но, например, Serif с засечками легко читается на экране мобильного устройства и может выглядеть интереснее, чем некоторые гротескные. Перечислим, на что следует обратить внимание при выборе шрифтов и работе с ними:
- Используйте разныевиды шрифтов для письма. Но помните, что нагромождение большого количества шрифтов в одном email может сделать текст беспорядочным, поэтому ограничьтесь двумя-тремя, которые органично дополняют друг друга: например, один – для заголовка, второй – для всего текста, третий – декоративный для выделения важных деталей на баннере. Избегайте сочетаний, которые не подходят по стилю (например: Arial и Comic Sans).
- Подобрать красивый шрифт для письма – это только полдела, обязательно проверьте шрифт на все необходимые вам начертания и глифы. Т.к. не все могут содержать необходимые символы. Чтобы не использовать их из других шрифтов, лучше сразу выбрать подходящий.
- Декоративные шрифты лучше использовать только в отдельных элементах и в небольшом количестве. Они плохо читаемы в длинных текстах, и не факт, что правильно отобразятся у пользователя. Если уж сильно хочется добавить в письмо что-то такое-эдакое – используйте безопасные антиква шрифты для рассылки, которые мы описали выше. А для остальных, с засечками, – рекомендуем перестраховаться и прописать в коде письма, какой шрифт (из безопасных) использовать почтовому клиенту, если он не может отобразить выбранный вами вариант.
- Выберите такой шрифт письма, который будет органически дополнять сообщение и подчеркнет корпоративный стиль. Странно писать о серьезных вещах используя Comic Sans, но если вы с клиентами достаточно близки – почему бы и нет? Comic Sans – это один из шрифтов, который часто поддается критике. Если вам очень нравится этот шрифт – не нужно делать всё письмо в этом стиле. Выделяйте заголовки или отдельные элементы.
- Ссылки оформляйте тем же шрифтом, что и весь текст письма – не используйте “голые” ссылки только с анкорами. Выбирайте подходящие по тексту и смыслу словосочетания, прочитав которые пользователь сразу поймет, куда ведет ссылка. Не используйте для анкоров общие слова “здесь” или “ссылка”.
- жирный шрифт: