IPB

Здравствуйте, гость ( Вход | Регистрация )

> Правила форума

Все ссылки на сторонние ресурсы, за исключением офсайтов программ, должны оформляться с помошью тега скрытого текста - [hide=1]Ссылка[/hide]

> @font-face подгружаем свой шрифт на сайт
Ann
24.02.2011 - 00:59
Сообщение #1



 
Group Icon
Группа: VIP
Сообщений: 906
Регистрация: 1.12.2002

Пользователь №: 3212




Что делать, если есть необходимость оформить веб-страницу с помощью нестандартных шрифтов?
Возможностей две:
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


продолжение следует
User is offlineProfile Card PM
Go to the top of the page
+
 
Reply to this topicStart new topic
Ответов(1 - 4)
taspac
6.04.2011 - 16:06
Сообщение #2



Full Member
***
Группа: Full member
Сообщений: 84
Регистрация: 13.03.2009

Пользователь №: 230668




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

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

Сообщение было отредактировано taspac: 6.04.2011 - 16:09
User is offlineProfile Card PM
Go to the top of the page
+
H4LLO
13.04.2011 - 16:21
Сообщение #3


No Avatar
Member
**
Группа: Пользовaтели
Сообщений: 25
Регистрация: 7.04.2011

Пользователь №: 264348




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

Сообщение было отредактировано H4LLO: 13.04.2011 - 16:24


--------------------
Request original: PT Serif Pro, PT Nat Flight
User is offlineProfile Card PM
Go to the top of the page
+
donjao
3.11.2011 - 11:53
Сообщение #4


No Avatar
Novice
*
Группа: Пользовaтели
Сообщений: 16
Регистрация: 3.04.2009

Пользователь №: 232672




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


Сообщение было отредактировано donjao: 3.11.2011 - 11:55
User is offlineProfile Card PM
Go to the top of the page
+
Жора
1.06.2012 - 16:23
Сообщение #5



Member
**
Группа: Пользовaтели
Сообщений: 28
Регистрация: 27.11.2011

Пользователь №: 268484




Самый простой и технически верный вариант, это использование 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
User is offlineProfile Card PM
Go to the top of the page
+
Реклама

Reply to this topicStart new topic
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0 -

 



- Текстовая версия Сейчас: 19.03.2024 - 10:46
]]> ]]>
]]> Яндекс.Метрика ]]>