Что на самом деле видит посетитель сайта, при применении нестандартного Web-шрифта на данном этапе развития браузеров?
Многие мучаются при создании сайта. Во многих случаях на сайте требуется применить нестандартный шрифт или иероглиф. Вы скачиваете красивый шрифт и начинаете верстать страницу, но не у всех пользователей есть такие шрифты. Некоторые не смущаются и просто создают графический файл, используя нужный им шрифт, но дополнительная графика не всегда подходит странице и у многих её и так хватает. Но есть один подходящий выход ! Этим выходом является использования технологии CSS (Cascading Style Sheets) или просто "Каскадных таблиц стилей". Обычно CSS заключается в сам, создаваемый файл, страничку, но можно создать файл CSS (.css) отдельно и соединить его путём прописки между тегом <head> таким образом:
<LINK href="scooter.css" rel=stylesheet type=text/css>
И нам с помошью CSS нужно автоматически закачать и установить файл шрифта True Type Font (.ttf), но установка произойдет только в том случае, если компьютер пользователя не обнаружит требуемого шрифта. Первым делом мы должны указать место положения шрифта. Для этого прописываем между тегами <head> и </head> так:
<style type="text/css">
p {font-family: URL шрифта (например, www.domen.ru/fonts/font.ttf) ;}
</style>
Таким образом вы можете использовать любые шрифты на своём сайте. Но советую сильно не изощряться, так как сам процесс закачки и установки шрифта тоже требует определённого времени. И если у вас сам шрифт "весит" 500kb и больше, то его не рекомендуется использовать в этом случае.
Автор: Бочкарёв Антон
Честно говоря, проще и правильней делать так:
<style>
@font-face {
font-family: mriam;
src: url(http://yapro.ru/uploads/Files/mriam.ttf);
}
</style>
<p style="font-family: mriam; font-size: 25px">12345</p>
Хоть Web-шрифты поддерживаются большинством браузеров, в Опере они глючат с самого начала. На некоторых системах не работают вообще, на тех что работают, при перезагрузке страницы могут сработать, а могут не сработать:
Поэтому, этим нельзя пользоваться в серьезных проектах, только в личных блогах, и только для текста размером больше 30px, чтобы не видеть чудеса сглаживания и кернинга.
В тоже время Google предоставляет Google Font API — API для кроссбраузерного подключения нестандартных шрифтов.
<html>
<head>
<link rel="stylesheet" type="text/css" href="_http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>
Google определяет браузер и выдает валидный для него CSS и шрифт.
Google Font Directory — набор шрифтов.
WebFont Loader — Javascript библиотека для расширенной работы с API.
Не забывайте про замечательную библиотеку cufon
Кстати cufon умеет еще много интересного типа градиентов, letter-spacing и т.п.
