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

Что на самом деле видит посетитель сайта, при применении нестандартного 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 и т.п.

Оцени публикацию:
  • 37,156
Оценили человек: 37

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Кириллические шрифты от Гугла не проходят валидацию :/
    28 сентября 2011, 17:47 коммент полезен : +1 # Haze (гость)
  • Вот 400+ шрифтов с поддержкой кириллицы и установкой как на google.font - http://web-marka.com/
    27 июня 2013, 11:51 коммент полезен : 0 # Евгений6
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »