Версия для печати темы

Нажмите сюда для просмотра этой темы в оригинальном формате

Форум на все случаи жизни _ WEB дизайн и прикладное программирование _ @font-face подгружаем свой шрифт на сайт

Автор: Ann 24.02.2011 - 00:59

Что делать, если есть необходимость оформить веб-страницу с помощью нестандартных шрифтов?
Возможностей две:
1 - сделать текст картинкой
2 - загрузить вместе с кодом на компьютер пользователя нужный шрифт.

Рассмотрим второй вариант.
Существует специальное правило @font-face

задаем нужный шрифт
@font-face {
font-family: font;
src: url(font.ttf);
}


затем в коде указываем, где его использовать.
P {
font-family: font;
}

Но, если посмотреть на результат - это будет работать практически во всех новых браузерах, кроме IE :(

Internet Explorer поддерживает только шрифты формата EOT. Где их взять?
конвертировать нужный фонт http://onlinefontconverter.com/myfonts.php
или http://www.fontsquirrel.com/fontface/generator


продолжение следует

Автор: taspac 6.04.2011 - 16:06

ещо конверторы:

Online:
http://ttf2eot.sebastiankippe.com/
http://www.kirsle.net/wizards/ttf2eot.cgi

Скачать:
http://code.google.com/p/ttf2eot/downloads/list

Free web fonts
(уже конвертированные шрифты):
http://www.fontspring.com/free
http://www.fontshop.com/freefonts/

@font-face спецификация:
http://www.w3.org/TR/css3-fonts/#the-font-face-rule

Автор: H4LLO 13.04.2011 - 16:21

Еще можно использовать js-рендерер шрифтов, например
http://cufon.shoqolate.com,
http://typeface.neocracy.org
В общем случае они конвертируют шрифт в собственный векторный формат, который рендерят в картинку + вставляют невидимую разметку, чтобы текст выделялся.

Автор: donjao 3.11.2011 - 11:53

ещё 1 голос за http://cufon.shoqolate.com т.к. он обеспечивает идентичное отображение на всех браузерах:

Автор: Жора 1.06.2012 - 16:23

Самый простой и технически верный вариант, это использование fontsquirrel.com
В связи с его использованием могут возникнуть две проблемы:
1. Он не принимает шрифты некоторых студий, ругаясь про копирайт
2. Не реализована защита от мигания в IE, например, как сделано на typekit

Для решения первой проблемы надо исправить шрифт любой программой редактирования шрифтов, убрав пометку о копирайте.

Решить вторую проблему можно добавив скрипт с гугла.
В head добавить:

Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">function Fonts(){WebFont.load({custom:{families:['font_name'],urls:['/font.css']}});} goFonts()</script>

и внизу страницы
Код
<script type="text/javascript">Fonts()</script>

Тут подробнее об этом https://developers.google.com/webfonts/docs/webfont_loader

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)