0

Добрый день, верстальщик из меня довольно плохой, вот поэтому и спрашиваю, посоветуйте, пожалуйста, как сделать кроссбраузерно чтобы в html при помощи css, внедрять нестандартные шрифты, которые могут быть и неустановлены, у пользователя сайта, пока вот что нашёл, не знаю насколько это верное решение

@font-face {
    font-family: Scriptorama; /* имя шрифта для CSS правил */
    src: local("Scriptorama"), /* проверяем наличие шрифта в ОС пользователя */
         url(path-to/Scriptorama.ttf); 
  }

Вопрос: как с такой задачей нужно бороться? Насколько верно моё решение и будет ли оно работать на основных современных браузера?

Заранее спасибо!

2 ответа 2

3

Прогоните ваш шрифт через шрифтобелку, как вам посоветовали выше.
В полученном архиве будет файл стилей, из которого вы скопируете @font-face-правило в свою таблицу стилей

@font-face {
    font-family: 'lobster_1.4regular';
    src: url('lobster-webfont.eot');
    src: url('lobster-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobster-webfont.woff') format('woff'),
         url('lobster-webfont.ttf') format('truetype'),
         url('lobster-webfont.svg#lobster_1.4regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

*Не забудьте поправить пути к вашей папке, где лежит шрифт
В большинстве случаев этого будет достаточно, чтобы шрифт заработал.
Иногда бывает нужно выбрать в шрифтобелке режим EXPERT, чтобы задать какие-то конкретные настройки шрифтов.

1
  • Спасибо! Все кто ответил очень помогли!
    – Rumato
    14 мар 2013 в 13:59
3

Ваше решение верное, однако нужно иметь ввиду, что разные браузеры предпочитают шрифты разных форматов: TTF, OTF, EOT, SVG и WOFF.
1. Internet Explorer (все версии) — EOT;
2. Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
3. Opera (начиная с 10) — TTF/OTF;
4. Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
5. Safari (начиная с 3.2) — TTF/OTF.

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.