Устанавливаем шрифты в css

Автор: Aport Четверг, Январь 22nd, 2015 Нет комментариев

Рубрика: Разное

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

image

Поэтому, этим нельзя пользоваться в серьезных проектах, только в личных блогах, и только для текста размером больше 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

Устанавливаем шрифты в css

Кстати cufon умеет еще много интересного типа градиентов, letter-spacing и т.п.

 

Источник: yapro.ru

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

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты