@font-face
@font-face CSS @-правило (en-US) позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция 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 кодов, который будет использоваться в шрифте.
Formal syntax
@font-face =
@font-face < >
Примеры
Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:
html> head> title>Web Font Sampletitle> style type="text/css" 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> This is Bitstream Vera Serif Bold. body> html>
В этом примере используется локальный пользовательский шрифт «Helvetica Neue Bold»; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием «MgOpenModernaBold.ttf»:
@font-face font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; >
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; > >
Спецификации
| Specification |
|---|
| CSS Fonts Module Level 4 # font-face-rule |
Browser compatibility
BCD tables only load in the browser
See also
- About WOFF (en-US)
- Everythingfonts font-face generator
- FontSquirrel @font-face generator
- Beautiful fonts with @font-face
- Open Font Library
- Microsoft Developer Network (MSDN) @font-face reference
- When can I use WOFF?
- When can I use SVG Fonts?
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.
Подключение css шрифтов локально
Искал в интернете , как подключить шрифты к сайту, с ссылкой на локальный файл, но полного ответа нигде не нашел Объясните пожалуйста по пунктам и в полном объеме, что нужно сделать, чтобы подключить шрифты к html и css файлам
Отслеживать
задан 20 фев 2020 в 5:37
vladdv861 dvin vladdv861 dvin
11 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
Так уж и не нашли? )) htmlbook.ru/blog/svoi-shrift-na-stranitse
20 фев 2020 в 5:45
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
- Находите или создаете файлы шрифтов (в разных форматах, для кросс-браузерности). Например, у вас шрифт «Шо-то-там» — вам понадобятся файлы шрифта. Кладете их в папку, например, /your-site/fonts. Получаете в ней такой набор файлов:
- st-Regular.ttf
- st-Italic.ttf
- st-Bold.ttf
- st-Regular.woff
- st-Italic.woff
- st-Bold.woff
- Создаете в css-файле столько директив @font-face, сколько файлов шрифтов у вас задействуется:
@font-face < font-family: 'Shototam'; src: url(/yoursite/fonts/st-Regular.ttf) format('ttf'), url(/yoursite/fonts/st-Regular.woff) format('woff'); font-weight: 400; >@font-face < font-family: 'Shototam'; src: url(/yoursite/fonts/st-Italic.ttf) format('ttf'), url(/yoursite/fonts/st-Italic.woff) format('woff'); font-style: italic; font-weight: 400; >@font-face < font-family: 'Shototam'; src: url(/yoursite/fonts/st-Bold.ttf) format('ttf'), url(/yoursite/fonts/st-Bold.woff) format('woff'); font-weight: 700; >- Применяете в стилях нужных элементов свойство font-family , указав «затычку» на случай неподгружения файлов шрифта: .my_bold_element
Отслеживать
ответ дан 20 фев 2020 в 9:56
Инквизитор Инквизитор
5,935 1 1 золотой знак 6 6 серебряных знаков 25 25 бронзовых знаков
- html
- css
- шрифты
- web-fonts
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как подключить гугл шрифты 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 для шрифтов. Раньше все время подключал через импорт якобы, чтобы код чище был, а оказывается это влияет на скорость, будем исправлять.