Кроссбраузерный шрифт

Здравствуйте читатели 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 .

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

С первого раза малость запутался )

Распишу порядок действий:

  1. Вам нужно скачать ваш шрифт (у меня  Annabelle.ttf);
  2. Перейти на сайт Fontsquirrel в WEBFONT GENERATOR;
  3. Добавить ваш шрифт (Add fonts);fontsquirrel
  4. Выбрать доступ к настройкам. Остановимся тут поподробнее. Как я понял, если ваш шрифт на русском (кириллица), то потребуется ставить доступ «EXPERT» и в пункте «Subsetting» выбрать «Custom Subsetting». Откроются дополнительные настройки. Там в пункте «Language» выбрать «Cyrillic»;fonts-lang
  5. Остальные настройки не так критичны, и я думаю вы сами справитесь с их настройкой, адаптировав их под себя;
  6. Ставьте галочку напротив «Agreement» , тем самым соглашаясь с условиями сервиса;
  7. Жмем «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.

Копируйте код и файлы шрифтов на сайт.
Если все сделали верно — наслаждаетесь результатом.

Рекомендуем к прочтению



5 комментариев

  • irishka:

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

  • рустэм:

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

  • Олег:

    А почему у блога 1с битрикс программиста блог на вордпресс сляпан УГАГА

  • Marina Zemina:

    Здравствуйте! Есть проги, которые могут переименовывать шрифт таким образом, что белка думает что это не Myraid. Однако даже если удалось обмануть фильтр, не факт что удастся легко найти нужный шрифт с кириллицей.

Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания применять.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.