Устанавливаем шрифты в 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

youtube.com/watch?v=7hFivbgIEqk

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

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