Здравствуйте читатели thisis-blog.ru!
Сегодня я хочу рассказать, как подключить шрифт средствами css.
Делается это довольно легко. В css есть правило @font-face, которое позволит нам это сделать. У этого правила имеется два свойства:
@font-face { font-family: 'название шрифта'; src: url('путь до шрифта'); }
В моем случае требовалось подключить шрифт Annabelle. Я нашел ссылку на него в сети и прописал в стилях правило @font-face:
@font-face { font-family:'Annabelle'; src: url('https://thisis-blog.ru/css3/fonts/Annabelle.ttf') format('truetype'); }
Добавил для блока с классом «name»:
.name{ font-family: Annabelle; }
В результате шрифт подключился, но к сожалению данный вариант не совершенен, а точнее не кроссбраузерный. А этот аспект очень важен т.к. является показателем качества вашего сайта. Советую также использовать инструменты для кроссбраузерности.
Немного поискав, нашел в сети интересный ресурс под названием Fontsquirrel .
Он дает возможность сделать шрифт кроссбраузерным.
С первого раза малость запутался )
Распишу порядок действий:
- Вам нужно скачать ваш шрифт (у меня Annabelle.ttf);
- Перейти на сайт Fontsquirrel в WEBFONT GENERATOR;
- Добавить ваш шрифт (Add fonts);
- Выбрать доступ к настройкам. Остановимся тут поподробнее. Как я понял, если ваш шрифт на русском (кириллица), то потребуется ставить доступ «EXPERT» и в пункте «Subsetting» выбрать «Custom Subsetting». Откроются дополнительные настройки. Там в пункте «Language» выбрать «Cyrillic»;
- Остальные настройки не так критичны, и я думаю вы сами справитесь с их настройкой, адаптировав их под себя;
- Ставьте галочку напротив «Agreement» , тем самым соглашаясь с условиями сервиса;
- Жмем «DOWNLOAD YOUR KIT» для загрузки кроссбраузерных шрифтов.
Для упрощения вашей жизни сервис пришлет не просто набор файлов, которые нужно подключить неизвестно каким образом, а демо версию с наглядным представлением, как подключить шрифты на ваш сайт.
В архиве будут следующие файлы:
- .html – страничка с иллюстрацией работы шрифта;
- .ttf, .woff, .eot, .svg – файлы шрифтов
- .css – как применять эти кроссбраузерные шрифты
У меня содержание .css файла такое:
@font-face { font-family: 'annabelle'; src: url('annabelle.eot'); src: url('annabelle.eot?#iefix') format('embedded-opentype'), url('annabelle.woff') format('woff'), url('annabelle.ttf') format('truetype'), url('annabelle.svg#annabelleregular') format('svg'); font-weight: normal; font-style: normal; }
Не забывайте, что файлы шрифтов при такой записи должны лежать в той же папке что и .css файл.
Какие расширения шрифтов понимают браузеры.
- Internet Explorer (все версии) — EOT;
- Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
- Opera (начиная с 10) — TTF/OTF;
- Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
- Safari (начиная с 3.2) — TTF/OTF.
Копируйте код и файлы шрифтов на сайт.
Если все сделали верно — наслаждаетесь результатом.
Спасибо большое.
Про Fontsquirrel знала, но в прошлый раз когда пыталась сделать шрифт кроссбраузерным не получилось. Сейчас сделала заново, всё получилось, довольна результатом, шриф хорошо отображается во всех популярных браузерах
Интересно очень, на сервисе «»шрифтовая белка» в процессе создания кроссбраузерного шрифта можно сделать
точный выбор символов для сжатого шрифта. Можно указать набор дополнительных символов, а можно указать диапазон используемых символов, или просто перечислить символы, которые нужны, или использовать симбиоз всех способов например оставить только заглавные буквы, если маленькие не будут использоваться
А почему у блога 1с битрикс программиста блог на вордпресс сляпан УГАГА
Было бы не разумно, не коммерческий проект делать на платной системе.
Здравствуйте! Есть проги, которые могут переименовывать шрифт таким образом, что белка думает что это не Myraid. Однако даже если удалось обмануть фильтр, не факт что удастся легко найти нужный шрифт с кириллицей.