slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 4229
Теги: css, css3, @font-face, font, шрифт

В этой статье я расскажу о том, каким образом можно подключить сторонние шрифты на свой сайт, а так же дам пару полезных ссылок и советов.

font-face

Для подключения своих шрифтов на сайт в CSS есть специальнаая конструкция @font-face {}, в которой описывается ваш личный шрифт и в будущем его можно использовать в любом месте на сайте.

Для начала поговорим о форматах файлов шрифтов для браузеров, их всего несколько: TTF, EOT, WOFF, SVG. Каждый из них подходит к нескольким браузерам, но как выяснилось нет ни одного уникального на данный момент, как как выглядит поддержка того или иного формата в браузерах:

ФорматInternet ExplorerChromeOperaSafariFirefoxAndroidiOS
TTF  9.0+  4.0+  10.0+  3.1+  3.5+  2.2+  -
EOT  5.0-8.0  -  -  -  -  -  -
WOFF  9.0+  5.0+  -  -  3.6+  -  -
SVG  -  1.0+  9.0+  3.1+  3.5+  -  1.05+

Как видно из таблицы для полной работы во всех браузрах нужно только пару форматов, но правильнее и полезнее будет использовать все четыре формата, тем более, что это позволительно.

Пример подключения шрифта выглядит следующим образом:

 

@font-face {
    font-family: 'BuxtonSketch'; 
    src: url('/BuxtonSketch.eot');
    src: local('BuxtonSketch'), url('/BuxtonSketch.ttf') format('truetype');
}

 

Давайте теперь разберемся с тем, что и как тут работает:

 

font-family: 'BuxtonSketch';

 

Эта строчка определяет маркер для шрифта, котороый потом можно будет использовать, чтобы обращаться к нему.

 

src: url('/BuxtonSketch.eot');

 

Эта строчка специально выделяет путь до файла шрифтов формата ".EOT".

 

src: local('BuxtonSketch'), url('/BuxtonSketch.ttf') format('truetype');

 

В этой строчке мы прописываем вначале "local(BuxtonSketch)" этим мы проверяем наличие шрифта у посетителя сайта, если его нету, то мы дополнительно подгружаем его, для этого дальше мы прописываем путь до файла шрифтов и далее указываем что за формат у этого файла.

Важно при прописывании пути учитывать регистр названия и формата, иначе этот файл не увидит браузер.

Вот как будет выглядить полноценный пример подключения стороннего шрифта и последующее использование его для всех тегов <p></p>:

 

@font-face {
    font-family: 'BuxtonSketch';
    src: url('/fonts/BuxtonSketch.eot');
    src: local('BuxtonSketch'), url('fonts/BuxtonSketch.woff') format('woff'), url('fonts/BuxtonSketch.ttf') format('truetype'), url('fonts/BuxtonSketch.svg') format('svg');
}

p {font-family:'BuxtonSketch';}

 

Учитывая, что все файлы шрифтов лежат в папке "fonts".

Если у вас есть только файл одного формата, всегда в интернете можно найти сайты, которые конвертируют из любого в другие.

Так же хочу посоветовать вам сайт http://www.font2web.com/, хоть он и на английском все довольно понятно, вы выбираете файл шрифтов формата .ttf или .otf, нажимаете на кнопку "Convert & Download", после чего начнется загрузка всех откорвентированных форматов с примером их использования.

Так же вы можеет скачать пример использования шрифта, который я тут показывал: download

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • Varvarka
    4.00
  • ZOMRO
    3.20
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 2142
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Спрайты для CSS Просмотров 1216
Спрайты для CSS

Довольно знакомая ситуация, когда на сайте используется сотня различных иконок, при этом каждая меняется при наведении на более светлую и мало ли что еще. И не удивительно, что с таким обилием картинок, подгружаемых на сайт, он немного может тормозить или картинки при наведении подгружаются долго.

Теги:

css, img, image, sprite, спрайт

Комментариев: 0 Подробнее

Последнее с форума

Urii-Polyakov-odnoklassniki аватар
Мы – команда разработчиков, дизайнеров и SEO-специалистов, которая любит свое дело и умеет создавать...
Перейти в тему
ZOMRO аватар
Оптимальные VDS/VPS Это сбалансированное предложение в соотношение цена-качество-количество ресурсо...
Перейти в тему
ZOMRO аватар
Скидка 50% на первый месяц Хотите получить уникальную скидку 50% на первый месяц пользования нашим ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.