Подключаем в ЖЖ сторонние шрифты
На основе материалов http://habrahabr.ru/blogs/webdev/94028/ и личного опыта
Бывает, хочется включить в html-страничку некий «красивый шрифт» или же включить редкие буквы.
Обычно это решается вводом UNICODE-символов, в надежде, что данный шрифт есть у читателя, или flash-анимацией (что «убивает» возможность цитирования) или же размещение текста картинкой. Последнее удобно для публикации, но ухудшает возможность цитирования.
Например, я публикую древнерусские или церковнославянские тексты в Интернете. Логично предположить, что я хочу дать возможность скопировать текст читателю и распечатать текст, если он хочет.
И Google сделало прекрасное решение: оно хранит адаптированные бесплатные шрифты у себя на сервере и можно легально обращаться к ним и подгружать «налету» на сайты.
Так как мне нравится славистика, мне чрезвычайно интересно публиковать славянские UNICODE-символы. И даже есть бесплатный шрифт, идеально подходящий для этой задачи: Old Standart TT. Шрифт бесплатный и придерживается стандартов UNICODE, то есть скопировав текст, можно применить данный шрифт или выбрать более удобный платный и бесплатный шрифт и распечатать текст.
Итак, как подключить эту «красивость и полезность»:
1) открываем Google Font API http://code.google.com/intl/ru-RU/apis/webfonts/
2) переходим на страницу Google Font Directory http://code.google.com/webfonts
3) выбираем нужный шрифт (я выбрал Old Standart TT http://code.google.com/webfonts/family?family=Old+Standard+TT )
4) на странице шрифта переходим в подраздел Get the code («Получить код»)
5) выбираем начертание шрифта: Regular, Italic, Bold (поставьте галочки на нужных начертаниях)
6) копируем две строчки строчки:
6.1) подключение «библиотеки стиля» (1). Для Old Standart TT в трех начертаниях это:
6.2) базовое описание стиля (2) (здесь - для заголовка):
h1 { font-family: 'Old Standard TT', arial, serif; }
7) не закрывая эту страницу «логинимся» в ЖЖ и переходим на основную страницу http://www.livejournal.com/
8) на это йстранице выбираем Журнал → Стиль журнала (страница http://www.livejournal.com/customize/ )
9) Выбираем «Настройте свой стиль» (страница http://www.livejournal.com/customize/options.bml )
10) находим ссылку «Custom CSS» и переходим по ней (страница http://www.livejournal.com/customize/options.bml?group=customcss 11) подключаем «библиотеку стиля», вставив текстовое поле «Custom external stylesheet URL» строку (1).
12) настраиваем журнал для отображения шрифта, чуть модифицировав строку (2) под свой стиль журнала и вставив в текстовое поле «Custom stylesheet». У меня вышло:
html, body, div, h1, h2, h3, h4, h5, dt, a, dt.a, em, p, .entry-title, li, ul, ul li, ul li a, li a, .sidebar-block, .sidebar-summary, .calendar-wrap, .sidebar, .entry-content, div .entry-content, .subj-link, .entry-title, br, .entrymenu, .entry-title a:link, .entry-title a:visited, .entry-title a:hover, .entry-title a:active, .entry-text a:link, .entry-text a:visited, .entry-text a:hover, .entry-text a:active, .calendar-wrap a:link, .calendar-wrap a:visited, .calen dar-wrap a:hover, .calendar-wrap a:active, .sidebar-summary a:link, .sidebar-summary a:visited, .sidebar-powered a:link, .sidebar-powered a:visited, .sidebar-tags a:link, .sidebar-tags a:visited, .sidebar-tags a:hover, .sidebar-tags a:active, .sidebar-links a:link, .sidebar-links a:visited { font-family: 'Old Standard TT', arial, serif; }
13) Нажимаем «Сохранить изменения»
14) любуемся результатом :)
Обновляю, почему-то предыдущее перестало работать:
вместо 11: открываем ссылку и копируем все данные в открывшемся файле (3)
в 12: добавляем сюда (2) и (3). У меня вышло:
@media screen {
@font-face {
font-family: 'Old Standard TT';
font-style: italic;
font-weight: normal;
src: local('Old Standard TT'), url('http://themes.googleusercontent.com/font?kit=QQT_AUSp4AV4dpJfIN7U5PWrQzeMtsHf8QsWQ2cZg3c') format('truetype');
}
}
@media screen {
@font-face {
font-family: 'Old Standard TT';
font-style: normal;
font-weight: bold;
src: local('Old Standard TT'), url('http://themes.googleusercontent.com/font?kit=5Ywdce7XEbTSbxs__4X1_HJqbZqK7TdZ58X80Q_Lw8Y') format('truetype');
}
}
@media screen {
@font-face {
font-family: 'Old Standard TT';
font-style: normal;
font-weight: normal;
src: local('Old Standard TT'), url('http://themes.googleusercontent.com/font?kit=n6RTCDcIPWSE8UNBa4k-DLcB5jyhm1VsHs65c3QNDr0') format('truetype');
}
}
html, body, div, h1, h2, h3, h4, h5, dt, a, dt.a, em, p, .entry-title, li, ul, ul li, ul li a, li a, .sidebar-block, .sidebar-summary, .calendar-wrap, .sidebar, .entry-content, div .entry-content, .subj-link, .entry-title, br, .entrymenu, .entry-title a:link, .entry-title a:visited, .entry-title a:hover, .entry-title a:active, .entry-text a:link, .entry-text a:visited, .entry-text a:hover, .entry-text a:active, .calendar-wrap a:link, .calendar-wrap a:visited, .calen dar-wrap a:hover, .calendar-wrap a:active, .sidebar-summary a:link, .sidebar-summary a:visited, .sidebar-powered a:link, .sidebar-powered a:visited, .sidebar-tags a:link, .sidebar-tags a:visited, .sidebar-tags a:hover, .sidebar-tags a:active, .sidebar-links a:link, .sidebar-links a:visited { font-family: 'Old Standard TT', arial, serif; }
Если хочется убрать стандартный шрифт полностью, в последней строке: «... font-family: 'Old Standard TT', arial, serif; ...» удаляем arial и получаем: «... font-family: 'Old Standard TT', serif; ...»
Бывает, хочется включить в html-страничку некий «красивый шрифт» или же включить редкие буквы.
Обычно это решается вводом UNICODE-символов, в надежде, что данный шрифт есть у читателя, или flash-анимацией (что «убивает» возможность цитирования) или же размещение текста картинкой. Последнее удобно для публикации, но ухудшает возможность цитирования.
Например, я публикую древнерусские или церковнославянские тексты в Интернете. Логично предположить, что я хочу дать возможность скопировать текст читателю и распечатать текст, если он хочет.
И Google сделало прекрасное решение: оно хранит адаптированные бесплатные шрифты у себя на сервере и можно легально обращаться к ним и подгружать «налету» на сайты.
Так как мне нравится славистика, мне чрезвычайно интересно публиковать славянские UNICODE-символы. И даже есть бесплатный шрифт, идеально подходящий для этой задачи: Old Standart TT. Шрифт бесплатный и придерживается стандартов UNICODE, то есть скопировав текст, можно применить данный шрифт или выбрать более удобный платный и бесплатный шрифт и распечатать текст.
Итак, как подключить эту «красивость и полезность»:
1) открываем Google Font API http://code.google.com/intl/ru-RU/apis/webfonts/
2) переходим на страницу Google Font Directory http://code.google.com/webfonts
3) выбираем нужный шрифт (я выбрал Old Standart TT http://code.google.com/webfonts/family?family=Old+Standard+TT )
4) на странице шрифта переходим в подраздел Get the code («Получить код»)
5) выбираем начертание шрифта: Regular, Italic, Bold (поставьте галочки на нужных начертаниях)
6) копируем две строчки строчки:
6.1) подключение «библиотеки стиля» (1). Для Old Standart TT в трех начертаниях это:
6.2) базовое описание стиля (2) (здесь - для заголовка):
h1 { font-family: 'Old Standard TT', arial, serif; }
7) не закрывая эту страницу «логинимся» в ЖЖ и переходим на основную страницу http://www.livejournal.com/
8) на это йстранице выбираем Журнал → Стиль журнала (страница http://www.livejournal.com/customize/ )
9) Выбираем «Настройте свой стиль» (страница http://www.livejournal.com/customize/options.bml )
10) находим ссылку «Custom CSS» и переходим по ней (страница http://www.livejournal.com/customize/options.bml?group=customcss 11) подключаем «библиотеку стиля», вставив текстовое поле «Custom external stylesheet URL» строку (1).
12) настраиваем журнал для отображения шрифта, чуть модифицировав строку (2) под свой стиль журнала и вставив в текстовое поле «Custom stylesheet». У меня вышло:
html, body, div, h1, h2, h3, h4, h5, dt, a, dt.a, em, p, .entry-title, li, ul, ul li, ul li a, li a, .sidebar-block, .sidebar-summary, .calendar-wrap, .sidebar, .entry-content, div .entry-content, .subj-link, .entry-title, br, .entrymenu, .entry-title a:link, .entry-title a:visited, .entry-title a:hover, .entry-title a:active, .entry-text a:link, .entry-text a:visited, .entry-text a:hover, .entry-text a:active, .calendar-wrap a:link, .calendar-wrap a:visited, .calen dar-wrap a:hover, .calendar-wrap a:active, .sidebar-summary a:link, .sidebar-summary a:visited, .sidebar-powered a:link, .sidebar-powered a:visited, .sidebar-tags a:link, .sidebar-tags a:visited, .sidebar-tags a:hover, .sidebar-tags a:active, .sidebar-links a:link, .sidebar-links a:visited { font-family: 'Old Standard TT', arial, serif; }
13) Нажимаем «Сохранить изменения»
14) любуемся результатом :)
Обновляю, почему-то предыдущее перестало работать:
вместо 11: открываем ссылку и копируем все данные в открывшемся файле (3)
в 12: добавляем сюда (2) и (3). У меня вышло:
@media screen {
@font-face {
font-family: 'Old Standard TT';
font-style: italic;
font-weight: normal;
src: local('Old Standard TT'), url('http://themes.googleusercontent.com/font?kit=QQT_AUSp4AV4dpJfIN7U5PWrQzeMtsHf8QsWQ2cZg3c') format('truetype');
}
}
@media screen {
@font-face {
font-family: 'Old Standard TT';
font-style: normal;
font-weight: bold;
src: local('Old Standard TT'), url('http://themes.googleusercontent.com/font?kit=5Ywdce7XEbTSbxs__4X1_HJqbZqK7TdZ58X80Q_Lw8Y') format('truetype');
}
}
@media screen {
@font-face {
font-family: 'Old Standard TT';
font-style: normal;
font-weight: normal;
src: local('Old Standard TT'), url('http://themes.googleusercontent.com/font?kit=n6RTCDcIPWSE8UNBa4k-DLcB5jyhm1VsHs65c3QNDr0') format('truetype');
}
}
html, body, div, h1, h2, h3, h4, h5, dt, a, dt.a, em, p, .entry-title, li, ul, ul li, ul li a, li a, .sidebar-block, .sidebar-summary, .calendar-wrap, .sidebar, .entry-content, div .entry-content, .subj-link, .entry-title, br, .entrymenu, .entry-title a:link, .entry-title a:visited, .entry-title a:hover, .entry-title a:active, .entry-text a:link, .entry-text a:visited, .entry-text a:hover, .entry-text a:active, .calendar-wrap a:link, .calendar-wrap a:visited, .calen dar-wrap a:hover, .calendar-wrap a:active, .sidebar-summary a:link, .sidebar-summary a:visited, .sidebar-powered a:link, .sidebar-powered a:visited, .sidebar-tags a:link, .sidebar-tags a:visited, .sidebar-tags a:hover, .sidebar-tags a:active, .sidebar-links a:link, .sidebar-links a:visited { font-family: 'Old Standard TT', arial, serif; }
Если хочется убрать стандартный шрифт полностью, в последней строке: «... font-family: 'Old Standard TT', arial, serif; ...» удаляем arial и получаем: «... font-family: 'Old Standard TT', serif; ...»