angorka: (Default)
[personal profile] angorka
По умолчанию на страницах показываются только шрифты, установленные на компьютере пользователя.
Если хочется использовать какой-то хитрый шрифт - нужно дополнительно подключить к странице файлы с этим шрифтом.

Есть несколько сервисов, предлагающих веб-шрифты, я расскажу только про Google Web Fonts



Как пользоваться?

1. Заходим на Google Web Fonts. В левой колонке в разделе Script выбираем Cyrillic, чтобы выбрать все шрифты с кириллицей.



2. Выбираем шрифт и нажимаем кнопку Quick use под ним



3. На открывшейся странице во втором разделе подключаем кириллицу



4. В синем поле есть код для встраивания шрифта. Он нам не подходит, но мы можем воспользоваться ссылкой из него:



Жёлтым выделила нужную часть (без кавычек):

<link href='http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

5. Скопируйте эту ссылку и вставьте её в адресную строку вашего браузера. Откроется страница с примерно таким кодом:

@font-face {
font-family: 'Kelly Slab';
font-style: normal;
font-weight: 400;
src: local('Kelly Slab'), local('KellySlab-Regular'), url(http://themes.googleusercontent.com/static/fonts/kellyslab/v3/gKqKZ8BbpAcxgFwZImcomxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}


Именно он нам и нужен : ) Для вашего шрифта будет другой код, этот только для примера.
Скопируйте его и вставьте в ваши стили в настройках журнала на странице Custom CSS в большое текстовое поле.

Если у вас там уже есть какие-то стили, вставьте этот код перед ними.

Сохраните настройки. Теперь вы можете пользоваться установленным шрифтом.

6. Как использовать шрифт в коде?

Как и любой другой, задав его через font-family.

Строчка с шрифтом:

font-family: 'Kelly Slab';

Она должна находиться внутри стилей для какого-либо блока. Вот так, например, этот шрифт задаётся для всего текста в журнале:

BODY {
font-family: 'Kelly Slab', sans-serif;
}


Если вы хотите, чтобы этот шрифт был только в определённых местах журнала, его нужно задавать конкретным блокам.
Про коды разных блоков журнала можно почитать тут

Что получается можно увидеть на картинке ниже:



Тут видно, как шрифт применился ко всему журналу : )

В каких браузерах работает?

Во всех современных браузерах, включая 9-й IE.
В старых браузерах текст будет выглядеть как обычно.

На самом деле, веб-шрифты работают во всех браузерах, но в этом случае и код будет длинее, и шрифтовых файлов побольше : ) Гугл предлагает только короткий вариант.

Экспериментируйте : )
Оригинал взят [livejournal.com profile] yoksel  Гуглошрифты в дизайне ЖЖ

Date: 3/2/13 13:17 (UTC)
From: [identity profile] ognnik.livejournal.com
я пока до шрифтов не добрался

Date: 3/2/13 13:20 (UTC)
From: [identity profile] muse-svp.livejournal.com
Спасибо, я еще со шрифтами тоже не разбиралась. Очень полезно)

Profile

angorka: (Default)
angorka

April 2013

M T W T F S S
1234567
891011121314
15161718192021
22232425262728
29 30     

Most Popular Tags

Style Credit

  • Style: Caturday - Orange Tabby for Heads Up by momijizuakmori

Expand Cut Tags

No cut tags
Page generated Tue, Sep. 19th, 2017 11:39
Powered by Dreamwidth Studios